在 vue/typescript 中解析 CSV 文件

Posted 2023-03-13

【中文标题】在 vue/typescript 中解析 CSV 文件

【英文标题】：Parsing CSV file in vue/typescript

【发布时间】：2019-09-12 03:08:49

【问题描述】：

我正在读取一个 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);  

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

HTML 视图：

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]

【参考方案1】：

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

深层文档的 URL：

https://www.papaparse.com/demo

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

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

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

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

在 javascript 应用中最容易实现的 NPM 包：

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

【讨论】：

谢谢，我确实安装并试用了它，但我的问题是，如果我设置 header: true 它将占据第一行并将其设置为标题...我已经有一个子集我想将解析后的数据加载到的标题..这仍然可能吗？如果我取第一行，我将获得大约 20 列，而我的子集标题有 4 个我想显示数据。

签出我的第二个答案，它采用 CSV 文件并对其进行解析，但仅显示您要显示的列。被复制似乎很简单

【参考方案2】：

如果您想拥有预定义的标题并仅显示包含所需列的表格。

查看我在代码沙箱上的示例之一，

https://codesandbox.io/embed/llqmrp96pm

示例 CSV 文件已上传到同一目录中，因此您可以上传它并看到魔法

这个 CSV 文件有 7 或 8 列，但我只显示 4 列，我假设这就是您要查找的内容

我看到您正在寻找 JavaScript 解决方案，我的示例是使用 ReactJS 和几个 NPM 库创建的，但它与您正在寻找的几乎相同，我相信它比在您的代码中复制任何东西都容易。