如何使用Javascript读取本地文本文件并逐行读取？

Posted 2023-02-22

【中文标题】如何使用Javascript读取本地文本文件并逐行读取？

【英文标题】：How to use Javascript to read local text file and read line by line?

【发布时间】：2014-06-13 10:28:12

【问题描述】：

我有一个 html+javascript 制作的网页，是演示版，我想知道如何读取本地 csv 文件并逐行读取，以便从 csv 文件中提取数据。

【问题讨论】：

看看这个html5rocks.com/en/tutorials/file/dndfiles

您对浏览器的兼容性有什么要求吗？特别是你支持ie9或更低？

developer.mozilla.org/en-US/docs/Web/API/FileReader

@HunterLarco 谢谢，问题是我不知道如何从结果中获取每一行。我的意思是 reader.readAsText() 返回所有数据，而不是我可以逐行读取

@LukeMcGregor 无要求，支持当前版本即可。

【参考方案1】：

使用 ES6，javascript 变得更简洁了

handleFiles(input) 

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => 
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => 
            console.log(line);
        );
    ;

    reader.onerror = (event) => 
        alert(event.target.error.name);
    ;

    reader.readAsText(file);

【讨论】：

投票赞成使用正则表达式拆分行，这是正确的做法。

更简单的正则表达式：\r?\n

很好的例子，我喜欢处理 Windows 和 Unix 风格的行尾。谢谢。

【参考方案2】：

没有 jQuery：

document.getElementById('file').onchange = function()

  var file = this.files[0];

  var reader = new FileReader();
  reader.onload = function(progressEvent)
    // Entire file
    console.log(this.result);

    // By lines
    var lines = this.result.split('\n');
    for(var line = 0; line < lines.length; line++)
      console.log(lines[line]);
    
  ;
  reader.readAsText(file);
;

HTML：

<input type="file" name="file" id="file">

记得在文件字段渲染后放置你的 javascript 代码。

【讨论】：

我有 200000 行（不是开玩笑，这是一个日志文件）。我不认为您的解决方案涵盖了这一点，不过还是不错的尝试。

此外，如果返回（换行）在带引号的字段内，则此解决方案无法处理。至于 Tomas，如果您有更高级的浏览器，您可以使用生成器逐行读取，而无需进行“拆分”。

我们取行的外部文件的路径在哪里？

@TomášZato 矿是 100m 线。不过，我还没有测试过这个答案。你是怎么做到的？一个例子的链接将非常感激！ huanPastas，为答案+1！

@gsamaras 我记不太清了，但我使用了一些流，它逐段读取数据，然后每次遇到\n 时都会发出事件。但是对于 100m 行，你会遇到用 HTML 显示它们的表格。