从输入类型文件选择的 CSV 文件生成数组

Question

我想读取使用输入类型文件上传的 CSV 文件，并将其数据输入数组。

我正在使用 Angularjs 和输入类型文件来读取 CSV、xls 或 xlsx 文件，如下所示：

HTML:

<input class="btn btn-default col-xs-6" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" onchange="angular.element(this).scope().checkFormat(this.files)">

JavaScript/AngularJS:

$scope.checkFormat = function(files) {
        var fd = new FormData();
        //Take the first selected file
        fd.append("file", files[0]);
}

如何逐行读取此 CSV 文件并将每一行推入数组？

Answer 1

最好的方法是 制定一个指令 具有这样的功能（比如我们称它为 csvUpload 并像这样使用它 <csv-upload ng-model="myData">） - 这样它将是可重用的，并且您不必在可能的许多控制器中实现此逻辑。这也很方便：一旦你有了它，你只需选择一个文件，然后，bam，将你的数据放在 $scope.myData :)

我是这样做的：

（要将 csv 转换为 json 我使用的是相当成熟的 https://github.com/mholt/PapaParse 库，但您可以自己将 csv 字符串解析为 json。我虽然不会推荐它;）

.directive('csvUpload', function () {
  return {
    restrict: 'E',
    template: '<input type="file" onchange="angular.element(this).scope().handleFiles(this.files)">',
    require: 'ngModel',
    scope: {},
    link: function (scope, element, attrs, ngModel) {
      scope.handleFiles = function (files) {
        Papa.parse(files[0], {
          dynamicTyping: true,
          complete: function(results) {
            // you can transform the uploaded data here if necessary
            // ...
            ngModel.$setViewValue(results);
          }
        });
      };

    }
  };
});

Answer 2

** HTML

**

<input type="file" name="datasource_upload" accept="application/vnd.ms-excel, application/pdf,.csv" ngf-max-size="2MB" (change)="csv2Array($event)">

**

Typescript code

**

    csv2Array(fileInput: any){
//read file from input
this.fileReaded = fileInput.target.files[0];

let reader: FileReader = new FileReader();
reader.readAsText(this.fileReaded);

reader.onload = (e) => {
  let csv: string = reader.result;
  let allTextLines = csv.split(/\r|\n|\r/);
  let headers = allTextLines[0].split(',');
  let lines = [];

  for (let i = 0; i < allTextLines.length; i++) {
    // split content based on comma
    let data = allTextLines[i].split(',');
    if (data.length === headers.length) {
      let tarr = [];
      for (let j = 0; j < headers.length; j++) {
        tarr.push(data[j]);
      }

      // log each row to see output 
      console.log(tarr);
      lines.push(tarr);
    }
  }
  // all rows in the csv file 
  console.log(">>>>>>>>>>>>>>>>>", lines);
} }

从输入类型文件选择的 CSV 文件生成数组

Generate array from CSV file selected by input type file

javascript

csv

xls

input-type-file

angularjs