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

【问题标题】：React js create a download file from a json response from APIReact js 从 API 的 json 响应创建下载文件
【发布时间】：2020-11-15 00:56:54
【问题描述】：

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

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

我是 react.js 的新手

【问题讨论】：

标签： json reactjs react-redux frontend export-to-csv

【解决方案1】：

您可以为此目的使用 react-json-to-csv 库。使用添加库：

纱线添加 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"
    }
  ]
}

点击按钮即可下载文件。

【讨论】：