Question

现在许多浏览器都支持使用HTML5的FileReader阅读本地文件，这为超越数据库前端的网站打开了大门。进入脚本，可以对本地数据做一些有用的事情，而不必先将它发送到服务器。

在上传之前预处理图像和视频，FileReader的一个大应用是将来自某种磁盘表（CSV，TSV等）的数据加载到浏览器中进行操作 - 可能用于D3中的绘图或分析.js或在WebGL中创建格局。

问题是，StackOverflow和其他站点上的大多数示例都使用FileReader的.readAsText（）属性，该属性在返回结果之前将整个文件读入RAM。

javascript: how to parse a FileReader object line by line

要在不将数据加载到RAM的情况下读取文件，需要使用.readAsArrayBuffer（），这个SO帖子是我能得到的最好的答案：

然而，它对于那个特定的问题有点过于具体，而且说实话，我可以尝试好几天来使解决方案更加通用，然后空手而归，因为我没有理解其重要性块大小或使用Uint8Array的原因。使用用户可定义的行分隔符逐行读取文件的更一般问题的解决方案（理想情况下使用.split（），因为它也接受正则表达式），然后按行执行某些操作（例如将其打印到console.log）是理想的。

Answer 1

我在以下Gist网址上创建了一个LineReader类。正如我在评论中提到的，使用除LF，CR / LF和CR之外的其他行分隔符是不常见的。因此，我的代码只将LF和CR / LF视为行分隔符。

https://gist.github.com/peteroupc/b79a42fffe07c2a87c28

示例：

new LineReader(file).readLines(function(line){
 console.log(line);
});

Answer 2

这里是Peter O编写的代码的改编的TypeScript类版本。

export class BufferedFileLineReader {
  bufferOffset = 0;
  callback: (line: string) => void = () => undefined;
  currentLine = '';
  decodeOptions: TextDecodeOptions = { 'stream': true };
  decoder = new TextDecoder('utf-8', { 'ignoreBOM': true });
  endCallback: () => void = () => undefined;
  lastBuffer: Uint8Array | undefined;
  offset = 0;
  omittedCR = false;
  reader = new FileReader();
  sawCR = false;

  readonly _error = (event: Event): void => {
    throw event;
  };

  readonly _readFromView = (dataArray: Uint8Array, offset: number): void => {
    for (let i = offset; i < dataArray.length; i++) {
      // Treats LF and CRLF as line breaks
      if (dataArray[i] == 0x0A) {
        // Line feed read
        const lineEnd = (this.sawCR ? i - 1 : i);
        if (lineEnd > 0) {
          this.currentLine += this.decoder.decode(dataArray.slice(this.bufferOffset, lineEnd), this.decodeOptions);
        }
        this.callback(this.currentLine);
        this.decoder.decode(new Uint8Array([]));
        this.currentLine = '';
        this.sawCR = false;
        this.bufferOffset = i + 1;
        this.lastBuffer = dataArray;
      } else if (dataArray[i] == 0x0D) {
        if (this.omittedCR) {
          this.currentLine += '\r';
        }
        this.sawCR = true;
      } else if (this.sawCR) {
        if (this.omittedCR) {
          this.currentLine += '\r';
        }
        this.sawCR = false;
      }
      this.omittedCR = false;
    }

    if (this.bufferOffset != dataArray.length) {
      // Decode the end of the line if no current line was reached
      const lineEnd = (this.sawCR ? dataArray.length - 1 : dataArray.length);
      if (lineEnd > 0) {
        this.currentLine += this.decoder.decode(dataArray.slice(this.bufferOffset, lineEnd), this.decodeOptions);
      }
      this.omittedCR = this.sawCR;
    }
  };

  readonly _viewLoaded = (): void => {
    if (!this.reader.result) {
      this.endCallback();
    }

    const dataArray = new Uint8Array(this.reader.result as ArrayBuffer);
    if (dataArray.length > 0) {
      this.bufferOffset = 0;
      this._readFromView(dataArray, 0);
      this.offset += dataArray.length;
      const s = this.file.slice(this.offset, this.offset + 256);
      this.reader.readAsArrayBuffer(s);
    } else {
      if (this.currentLine.length > 0) {
        this.callback(this.currentLine);
      }
      this.decoder.decode(new Uint8Array([]));
      this.currentLine = '';
      this.sawCR = false;
      this.endCallback();
    }
  }

  constructor(private file: File) {
    this.reader.addEventListener('load', this._viewLoaded);
    this.reader.addEventListener('error', this._error);
  }

  public readLines(callback: (line: string) => void, endCallback: () => void) {
    this.callback = callback;
    this.endCallback = endCallback;
    const slice = this.file.slice(this.offset, this.offset + 8192);
    this.reader.readAsArrayBuffer(slice);
  }
}

再次感谢Peter O的精彩回答。

逐行读取FileReader对象，而不将整个文件加载到RAM中

2 个答案: