0

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

我现在做的事情如下：

  1. 下载文件
  2. 将文件内容放入<pre>标签中

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

将纯文本转换为等效的 HTML，然后将所述 HTML 插入 DOM 需要很长时间（插入是这里的瓶颈；转换时间大约为毫秒）。

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

编辑：

删除了关于使用 web workers 的部分，因为它不能进行 DOM 操作，当时我认为文本处理是瓶颈

4

2 回答 2

0

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

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

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

于 2012-09-27T06:26:14.413 回答
0

我这样做的方式如下：

<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 查找文本，但确实满足了我能够显示大型电子书的要求。

于 2012-10-29T21:02:24.610 回答