Javascript - 获取使用 FileReader() 读取的文件的格式化预览？

Question

我尝试实现一个拖拽文件功能。我需要预览文件的文本，在本例中是一个 HTML 文件。但是当我将 FileReader 的结果插入 DOM 时，预览会丢失所有换行符和文本缩进。

我尝试使用 jQuery .split() 并插入一个 <br/> , 但文本仍然失去了所有缩进。

for(var i = 0; i <files.length; i++){

    reader = new FileReader();
    reader.onload = function(evt){
        var r = evt.target.result;

        r = r.replace(/>/g,'&gt; >');
        r = r.replace(/</g,'&lt;');
        r = r.split('>')

        var text="";
        for(var i =0; i<r.length; i++){
            r[i] = $.trim(r[i]);
            text += r[i]+'<br/>';
        }
        $('.drop-area').html(text);

    }
    reader.readAsText(files[i]);
}

尝试将 HTML 文件拖到此处 http://jsfiddle.net/gVZRU/2/

有可能解决吗？我可以采取任何其他方法来实现此功能吗？

Answer 1

您只需添加 white-space: pre-wrap; 到展示框的样式。

HTML 源代码中的多个连续空格总是折叠成呈现内容中的单个输出空格。 white-space CSS 属性允许您更改此行为，pre value 表示将空格视为 <pre> 标签确实如此(即在渲染结果中显示所有空白)。 pre-wrap就像pre , 但允许文本换行。