javascript - 在 vue/typescript 中解析 CSV 文件

Question

我正在读取一个 csv 文件，我正在解析它，但遇到了一些问题。

1 - 在解析文件之前，我已经有了一个包含标题字符串的数组，我想从 csv 文件中提取数据。

2- 我想解析文件，这样我也可以将数据显示到带有预定义标题的表格中。任何额外的标题都将被忽略，不会显示在表格中。

这是我的代码:

this.predefinedHeaders = ["Name", "Age", "Gender"];

readCSV(event: Event) {
  const file = (event.target as HTMLInputElement).files![0];  
  var reader = new FileReader();  
  let text = (reader.result as string).split(/\r\n|\r|\n/);  
  let lines = [];  
  for( var i=1; i<text.length; i++) {  
    var data = text[i].split(',');  
    var tarr=[];  
    for(var j=0; j<this.predefinedHeaders.length; j++) {  
      tarr.push(data[j]);  
    }  
    lines.push(tarr);  
  }  
 this.tableData = lines;  
}  
reader.readAsText(file);  

当前发生的情况是数据正在填充到表中，但不在正确的标题下。我如何将数据绑定(bind)到我的标题...注意:预定义的保证是原始标题的一部分文件。不同之处在于它不显示所有列的数据，例如其中的几个。

HTML View :

table
  thead
   tr
    th(v-for='column in predefinedColumns) {{column.name}}
  tbody
   tr(v-for='(a, index)in data')
    td(v-for='(b, index2) in a') {{data[index][index2]}}

Answer 1

您可能想使用最流行的 CSV 解析器，即 PapaParse。

深层文档的 URL:

https://www.papaparse.com/demo

这个库有各种配置选项，其中之一是“标题行”，这是您需要的精确解决方案。

要使用预定义的 header ，您可以将 header 参数设置为 true 以将所有数据解析为键值对。

示例:{ data: Papa.parse(reader.result, { header: true }) }

使用'header: true'，它会将CSV文件的第一行作为CSV文件中所有行的键值

在 javaScript 应用程序中最容易实现的 NPM 包:

https://www.npmjs.com/package/papaparse