Question

请你帮我解决以下问题。

目标

逐行读取客户端（通过浏览器通过JS和HTML5类）的文件，而不将整个文件加载到内存中。

方案

我在网页上工作，该网页应解析客户端的文件。目前，我正在阅读此article中描述的文件。

HTML：

<input type="file" id="files" name="files[]" />

JavaScript的：

$("#files").on('change', function(evt){
    // creating FileReader
    var reader = new FileReader();

    // assigning handler
    reader.onloadend = function(evt) {      
        lines = evt.target.result.split(/\r?\n/);

        lines.forEach(function (line) {
            parseLine(...);
        }); 
    };

    // getting File instance
    var file = evt.target.files[0];

    // start reading
    reader.readAsText(file);
}

问题是FileReader立即读取整个文件，这会导致大文件崩溃的选项卡（大小＆gt; = 300 MB）。使用reader.onprogress并不能解决问题，因为它只会增加结果，直到达到极限。

发明轮子

我已经在互联网上做过一些研究，并没有找到任何简单的方法（有很多文章描述了这个确切的功能，但在服务器端有一些用于node.js）。

作为解决问题的唯一方法，我只看到以下内容：

按块（通过File.split(startByte, endByte)方法）
查找该块中的最后一个新行字符（＆＃39; / n＆＃39;）
读取除最后一个新行字符后的部分以外的块，并将其转换为字符串并按行分割
从第2步上的最后一个新行字符开始读取下一个块

但我会更好地利用现有的东西来避免熵增长。

Answer 1

最终，我创建了新的逐行阅读器，这与之前的阅读器完全不同。

功能是：

基于索引的文件访问（顺序和随机）
针对重复随机读取进行了优化（为已经过去导航的行保存了字节偏移的里程碑），因此在您读取所有文件一次后，访问第43422145行的速度几乎与访问第12行一样快。
在文件中搜索：查找下一个和查找全部。
确切的索引，偏移量和匹配长度，因此您可以轻松突出显示它们

请查看此jsFiddle以获取示例。

用法：

// Initialization
var file; // HTML5 File object
var navigator = new FileNavigator(file);

// Read some amount of lines (best performance for sequential file reading)
navigator.readSomeLines(startingFromIndex, function (err, index, lines, eof, progress) { ... });

// Read exact amount of lines
navigator.readLines(startingFromIndex, count, function (err, index, lines, eof, progress) { ... });

// Find first from index
navigator.find(pattern, startingFromIndex, function (err, index, match) { ... });

// Find all matching lines
navigator.findAll(new RegExp(pattern), indexToStartWith, limitOfMatches, function (err, index, limitHit, results) { ... });

性能与之前的解决方案相同。你可以测量它调用＆＃39; Read＆＃39;在jsFiddle。

GitHub：https://github.com/anpur/client-line-navigator/wiki

Answer 2

更新：请从我的第二个答案中检查LineNavigator，该读者会更好。

我制作了自己的读者，满足了我的需求。

<强>性能

由于问题仅与大文件有关，因此性能是最重要的部分。 enter image description here

如您所见，性能与直接读取几乎相同（如上所述）。 ~~目前我试图让它变得更好，因为更大的时间消费者是异步调用以避免调用堆栈限制命中，这对执行问题来说不是必需的。~~性能问题已经解决。

<强>质量

以下案例经过测试：

空文件
单行文件
末尾有新行字符的文件，没有
检查已解析的行
在同一页面上多次运行
没有线丢失且没有订单问题

代码＆amp;使用

HTML：

<input type="file" id="file-test" name="files[]" /> <div id="output-test"></div>

用法：

$("#file-test").on('change', function(evt) { var startProcessing = new Date(); var index = 0; var file = evt.target.files[0]; var reader = new FileLineStreamer(); $("#output-test").html(""); reader.open(file, function (lines, err) { if (err != null) { $("#output-test").append('<span style="color:red;">' + err + "</span><br />"); return; } if (lines == null) { var milisecondsSpend = new Date() - startProcessing; $("#output-test").append("<strong>" + index + " lines are processed</strong> Miliseconds spend: " + milisecondsSpend + "<br />"); return; } // output every line lines.forEach(function (line) { index++; //$("#output-test").append(index + ": " + line + "<br />"); }); reader.getNextLine(); }); reader.getNextLine(); });

代码：

function FileLineStreamer() { var loopholeReader = new FileReader(); var chunkReader = new FileReader(); var delimiter = "\n".charCodeAt(0); var expectedChunkSize = 15000000; // Slice size to read var loopholeSize = 200; // Slice size to search for line end var file = null; var fileSize; var loopholeStart; var loopholeEnd; var chunkStart; var chunkEnd; var lines; var thisForClosure = this; var handler; // Reading of loophole ended loopholeReader.onloadend = function(evt) { // Read error if (evt.target.readyState != FileReader.DONE) { handler(null, new Error("Not able to read loophole (start: )")); return; } var view = new DataView(evt.target.result); var realLoopholeSize = loopholeEnd - loopholeStart; for(var i = realLoopholeSize - 1; i >= 0; i--) { if (view.getInt8(i) == delimiter) { chunkEnd = loopholeStart + i + 1; var blob = file.slice(chunkStart, chunkEnd); chunkReader.readAsText(blob); return; } } // No delimiter found, looking in the next loophole loopholeStart = loopholeEnd; loopholeEnd = Math.min(loopholeStart + loopholeSize, fileSize); thisForClosure.getNextBatch(); }; // Reading of chunk ended chunkReader.onloadend = function(evt) { // Read error if (evt.target.readyState != FileReader.DONE) { handler(null, new Error("Not able to read loophole")); return; } lines = evt.target.result.split(/\r?\n/); // Remove last new line in the end of chunk if (lines.length > 0 && lines[lines.length - 1] == "") { lines.pop(); } chunkStart = chunkEnd; chunkEnd = Math.min(chunkStart + expectedChunkSize, fileSize); loopholeStart = Math.min(chunkEnd, fileSize); loopholeEnd = Math.min(loopholeStart + loopholeSize, fileSize); thisForClosure.getNextBatch(); }; this.getProgress = function () { if (file == null) return 0; if (chunkStart == fileSize) return 100; return Math.round(100 * (chunkStart / fileSize)); } // Public: open file for reading this.open = function (fileToOpen, linesProcessed) { file = fileToOpen; fileSize = file.size; loopholeStart = Math.min(expectedChunkSize, fileSize); loopholeEnd = Math.min(loopholeStart + loopholeSize, fileSize); chunkStart = 0; chunkEnd = 0; lines = null; handler = linesProcessed; }; // Public: start getting new line async this.getNextBatch = function() { // File wasn't open if (file == null) { handler(null, new Error("You must open a file first")); return; } // Some lines available if (lines != null) { var linesForClosure = lines; setTimeout(function() { handler(linesForClosure, null) }, 0); lines = null; return; } // End of File if (chunkStart == fileSize) { handler(null, null); return; } // File part bigger than expectedChunkSize is left if (loopholeStart < fileSize) { var blob = file.slice(loopholeStart, loopholeEnd); loopholeReader.readAsArrayBuffer(blob); } // All file can be read at once else { chunkEnd = fileSize; var blob = file.slice(chunkStart, fileSize); chunkReader.readAsText(blob); } }; };

Answer 3

为了同样的目的，我编写了一个名为line-reader-browser的模块。它使用Promises。

语法（Typescript）： -

import { LineReader } from "line-reader-browser"

// file is javascript File Object returned from input element
// chunkSize(optional) is number of bytes to be read at one time from file. defaults to 8 * 1024
const file: File
const chunSize: number
const lr = new LineReader(file, chunkSize)

// context is optional. It can be used to inside processLineFn   
const context = {}
lr.forEachLine(processLineFn, context)
  .then((context) => console.log("Done!", context))

// context is same Object as passed while calling forEachLine
function processLineFn(line: string, index: number, context: any) {
   console.log(index, line)
}

用法： -

import { LineReader } from "line-reader-browser"

document.querySelector("input").onchange = () => {
   const input = document.querySelector("input")
   if (!input.files.length) return
   const lr = new LineReader(input.files[0], 4 * 1024)
   lr.forEachLine((line: string, i) => console.log(i, line)).then(() => console.log("Done!"))
}

尝试以下代码段以查看模块是否正常工作。

＆＃13;

<html>
   <head>
      <title>Testing line-reader-browser</title>
   </head>
   <body>
      <input type="file">
      <script src="https://cdn.rawgit.com/Vikasg7/line-reader-browser/master/dist/tests/bundle.js"></script>
   </body>
</html>

＆＃13;

＆＃13;
希望它能节省一些人的时间！

在客户端JavaScript中读取逐行文件

3 个答案: