Question

我需要在移动设备浏览器上显示大文本文件（10 MB以下）。目前不支持以块的形式下载文件。

我目前正在做的事情如下：

下载文件
将文件内容放入<pre>标记

问题在于<pre>不能很好地使用word-wrap:break-words CSS进行自动换行。它以不可接受的方式（明显地）破坏了单词并使显示的文本不可读。没有自动换行不是一种选择，因为你不想要水平滚动（而且移动版Safari只是拒绝在<pre>元素上生成水平滚动条）

将纯文本转换为等效的HTML然后将所述HTML插入DOM需要永远（插入是这里的瓶颈;转换时间是毫秒级）。

关于如何在移动设备上以可接受的方式显示纯文本的任何想法？

编辑：

删除了关于使用Web worker的部分，因为它无法进行DOM操作，当时我认为文本处理是瓶颈

Answer 1

假设您显示的文档是日志文件...

以某种方式关闭文件，比如说只有最后1k行。使用javascript加载并使每行成为列表中的条目，并使用css或javascript 在交替元素上添加背景颜色。这使得换行不相关而不需要水平滚动。

在文档的顶部有一个输入元素，其内容用于过滤列表。每当输入元素的内容发生变化时，列表中与其不匹配的元素（作为正则表达式）都会被隐藏，并重新应用颜色条带。如果您无法一次显示整个文件，则可以根据过滤器框的内容重新请求文件（可能需要按下另一个按钮）。

Answer 2

我这样做的方式如下：

<pre id='text_preview'>
</pre>

下面的近似代码。

$.get("url/of/text/file.txt", function(response) {
    var fileText = response, pageNumber = 1, pageSize = 105600;
    //first 100 kb of content, assuming 8 bytes/char
    //don't have exact value for this, using approx
    $('#text_preview').text(fileText.slice(0, pageNumber * pageSize);
    window.onscroll = function() {
       //implementation of this left as an exercise for the reader
       if(scrollNearBottom()) {
          pageNumber++;
          $("#text_preview").append(fileText.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
       }
    }
});

显然，这无助于我使用Ctrl + F查找文本的需要，但确实满足了我能够显示大型电子书的要求。

在移动浏览器上显示大文本文件

编辑：

2 个答案: