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

Question

我正在使用angular2编写一个应用程序来读取一个简单输入的csv文件:

<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);

}

如何逐个单元格读取使用typescript,javascript或jquery上传的csv文件？(这是最好的方法).

Answer 1

这是一个示例实现角度方式:

@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上试试吧

Answer 2

除了asmmahmud的答案之外，我还要添加如何实际解析文件内容的方法，以便在数组（具有TypeScript的Angular）中具有行和列。添加属性：

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

现在，您已经在二维数组中包含解析后的CSV及其行和列parsedCsv（第一维是行，第二维是行）。您可以根据需要更换分隔符-默认为分号。

例：

包含

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);