0

モバイルデバイスのブラウザで大きなテキストファイル（10 MB未満）を表示する必要があります。ファイルをチャンクでダウンロードすることは現在サポートされていません。

私が今していることは次のとおりです。

  1. ダウンロードファイル
  2. <pre>ファイルの内容をタグに入れる

これに伴う問題は、 CSS<pre>でワードラップがうまく機能しないことです。word-wrap:break-wordsそれは（明らかに）容認できない方法で単語を壊し、表示されたテキストを読めなくします。水平スクロールが必要ないため、ワードラップはオプションではありません（モバイルSafariは<pre>要素に水平スクロールバーを生成することを単に拒否します）

プレーンテキストを同等のHTMLに変換してから、そのHTMLをDOMに挿入するには、永遠に時間がかかります（ここでは、挿入がボトルネックになります。変換時間はミリ秒のオーダーです）。

モバイルデバイスでプレーンテキストを許容できる方法で表示する方法について何かアイデアはありますか？

編集：

DOM操作ができないため、Webワーカーの使用に関する部分を削除しました。当時、テキスト処理がボトルネックだと思っていました。

4

2 に答える 2

0

Assuming the document you are showing is a log file...

Tail the file in some fashion, taking, say, only the last 1k lines. Load with javascript and make each line an entry in a list, and use css or javascript to put a background color on alternating elements. This makes the line breaks irrelevant without adding a need for horizontal scrolling.

At the top of the document have an input element whose contents are used to filter the list. Any time the contents of the input element changes, elements in the list not matching it (as a regex) are hidden and the color banding is re-applied. If you can't display the whole file at once, you can re-request the file based on the contents of the filter box (perhaps with another button press).

于 2012-09-27T06:26:14.413 に答える
0

The way I did it was as follows:

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

Approximate code below.

$.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);
       }
    }
});

Obviously, this won't help my need to find text using Ctrl+F but does satisfy the requirement that I be able to display large e-books.

于 2012-10-29T21:02:24.610 に答える