React js 根据 API 的 json 响应创建下载文件

Question

我有一个 React js 应用程序正在从 API 接收以下 JSON 对象。 如何从 JSON 创建 CSV 文件导出并使用 React js 为用户创建下载 link？

{
    "data": [
        {
            "location": "232323",
            "name": "ZZZZZZZ",
            "phoneNumber": "2003223232"
        },
        {
            "location": "23334",
            "name": "XYZ",
            "phoneNumber": "1234323334"
        }
}

我是 react.js

的新手

Answer 1

您可以为此使用 react-json-to-csv 库。使用以下方式添加库：

yarn add react-json-to-csv

然后像这样使用它：

import React from "react";
import CsvDownload from "react-json-to-csv";

import data from "./data.json"; // or you can use a file from api

const mockData = data;

export default function () {
  return (
    <div>
      <CsvDownload data={mockData.data}>Json to CSV</CsvDownload>
    </div>
  );
}

您的数据文件，即 data.json 将是：

{
  "data": [
    {
      "location": "232323",
      "name": "ZZZZZZZ",
      "phoneNumber": "2003223232"
    },
    {
      "location": "23334",
      "name": "XYZ",
      "phoneNumber": "1234323334"
    }
  ]
}

点击按钮即可下载文件。