在 ReactJS 中读取具有相对路径的本地 CSV

Question

使用 reactjs（在 Meteor 中）我想读取一个带有相对路径的本地 csv 文件并循环遍历它的行：

import Papa from 'papaparse';
var csvfile = "../../../data.csv";
Papa.parse(csvfile, {
  step: function (row) {
    console.log("Row:", row.data);
  },
});

这个returns

Row: [ [ '../../../data.csv' ] ]

Answer 1

看起来你的库期望 JSON，而你指定了一个路径。

您应该使用 fs 从文件中读取 JSON，然后将其传递给解析方法。

fs.readFile(csvFile, 'utf8', function (err, data) {
    if (err) {
        throw err;
    }
    Papa.parse(data, {
     step: function (row) {
      console.log("Row:", row.data);
     }
   });
});

Answer 2

当使用文件而不是字符串作为输入时，您可以设置 download 配置标志。来自 config documentation:

If true, this indicates that the string you passed as the first argument to parse() is actually a URL from which to download a file and parse its contents.

import csvFile from '../../data/my-csv-file.csv'

Papa.parse(csvFile, {
    download: true,
    complete: function (input) {
         const records = input.data;
    }
});

Answer 3

Simon Raes 的回答帮助最大。这是一个完整的 React 示例：

import React from 'react';
import { readString } from 'react-papaparse';
import siteListCSV from './example.csv';

const papaConfig = {
  complete: (results, file) => {
    console.log('Parsing complete:', results, file);
  },
  download: true,
  error: (error, file) => {
    console.log('Error while parsing:', error, file);
  },
};
readString(siteListCSV, papaConfig);

function App() {
  return (
    <h1>Check the console</h1>
  );
}

export default App;

在 ReactJS 中读取具有相对路径的本地 CSV

Read local CSV with relative path in ReactJS

csv

reactjs

papaparse