如何逐行读取angular2上的csv文件

新手上路,请多包涵

我正在用 angular2 编写一个应用程序,它读取一个 csv 文件,只需在 html 中输入:

 <input type='file' name='userFile' id='file' >

我可以访问 component.ts 中的文件:

 ngOnInit() {

   var input = (<HTMLInputElement>document.getElementById("file"));
   input.addEventListener("change", function(event) {
      var files = input.files;
      var len = files.length;

         if (len) {
          console.log("Filename: " + files[0].name);
          console.log("Type: " + files[0].type);
          console.log("Size: " + files[0].size + " bytes");

         }

      }, false);

}

如何逐个单元格地读取使用打字稿、JavaScript 或 jQuery 上传的 csv 文件? (这是最好的方法)。

原文由 user6223678 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 345
2 个回答

这是一个示例实现角度方式(角度版本 2+):

 @Component({
  selector: 'app-my-file',
  template: `
   <div class="form-group">
        <input type="file" (change)="onFileSelect($event.target)" name="myfile">
   </div>
  `,
  styles: [``]
})
export class YourComponent implements OnInit {

    csvContent: string;

    constructor(){}
    ngOnInit(){
    }

    onFileLoad(fileLoadedEvent) {
            const textFromFileLoaded = fileLoadedEvent.target.result;
            this.csvContent = textFromFileLoaded;
            // alert(this.csvContent);
    }

    onFileSelect(input: HTMLInputElement) {

      const files = input.files;
      var content = this.csvContent;
      if (files && files.length) {
         /*
          console.log("Filename: " + files[0].name);
          console.log("Type: " + files[0].type);
          console.log("Size: " + files[0].size + " bytes");
          */

          const fileToRead = files[0];

          const fileReader = new FileReader();
          fileReader.onload = this.onFileLoad;

          fileReader.readAsText(fileToLoad, "UTF-8");
      }

    }
}

在 StackBlitz 上试用

原文由 asmmahmud 发布,翻译遵循 CC BY-SA 4.0 许可协议

除了 asmmahmud 的回答 之外,我还想补充一下如何实际解析文件内容,以便在数组中包含行和列(Angular with TypeScript)。添加属性:

 parsedCsv: string[][];

在他的例子中上课 YourComponent 。然后,更新 onFileLoad 事件如下:

 onFileLoad(fileLoadedEvent): void {
 const csvSeparator = ';';
 const textFromFileLoaded = fileLoadedEvent.target.result;
 this.csvContent = textFromFileLoaded;
 // alert(textFromFileLoaded);

 const txt = textFromFileLoaded;
 const csv = [];
 const lines = txt.split('\n');
 lines.forEach(element => {
   const cols: string[] = element.split(csvSeparator);
   csv.push(cols);
 });
 this.parsedCsv = csv;
 // console.log(this.parsedCsv);
}

现在您在二维数组 parsedCsv 中得到了解析的 CSV 及其行和列(第一维是行,第二维是列)。如果需要,您可以替换分隔符 - 默认为分号。

例子:

一个文件包含

A;B;C

1;2,300;3

4;5.5;6

parsedCsv

示例内容

您可以看到,如果您的文件包含列标题,则数据以行索引 1 开头,否则(没有列标题)行索引 0。

更新的 Stackblitz 示例

注意: 在 Stackblitz 上,我添加了以下几行,以便您可以看到数组是如何填充的:

   // demo output as alert
  var output: string="";
  csv.forEach(row => {
    output += "\n";
    var colNo = 0;
    row.forEach(col => {
      if (colNo>0) output += " | ";
      output += col;
      colNo++;
    });
  });
  alert(output);

原文由 Matt 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题