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


83

我有一个由html + javascript制作的网页,该网页是演示程序,我想知道如何读取本地csv文件并逐行读取内容,以便可以从csv文件中提取数据。



2
您对浏览器是否有兼容性要求?特别是您是否支持ie9或更少?
不喜欢


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

@LukeMcGregor没有要求,只支持当前版本就可以了。
litaoshen 2014年

Answers:


114

没有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代码。


19
我有200000行(不是在开玩笑,这是一个日志文件)。我不认为您的解决方案可以解决这个问题,不过不错的尝试。
托马什Zato -恢复莫妮卡

另外,如果该return(换行)在带引号的字段内,则此解决方案将无法处理。至于Tomas,如果您拥有更高级的浏览器,则可以使用生成器逐行读取而不进行“拆分”。
拉赫利2015年

5
我们在其中插入行的外部文件的路径在哪里?
abidinberkay

@TomášZato矿井为100m行。我还没有测试过答案。.您是如何做到的?链接到示例将非常感激!huanPastas,+ 1为答案!
gsamaras

2
@gsamaras我不记得确切,但是我使用了一些流,它逐段读取数据,然后每次遇到时都发出事件\n。但是,如果有1亿行,您就会碰巧用HTML显示它们。
托马什Zato -恢复莫妮卡

37

使用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);
}

3
用正则表达式投票赞成分割线,这是正确的方法。
Meysam Feghhi,2017年

12
更简单的正则表达式:\r?\n
ceving

1
很好的例子,我喜欢处理Windows和Unix样式的行尾。谢谢。
布拉德(Brad)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.