时间戳

首页 > 解决方案 > React - 将数据从外部 API 传递到 CSV 文件

reactjs - React - 将数据从外部 API 传递到 CSV 文件

问题描述

我正在尝试从外部 api 传递数据并将其转换为 CSV 文件。这是我到目前为止所拥有的：

import React, { Component } from 'react';
import { CSVLink } from "react-csv";
import Header from './components/header'
import './App.scss'

class App extends Component {

  constructor() {
    super()
    this.state = {
      orders: []
    }
    this.getReports = this.getReports.bind(this)
  }

  getReports = async () => {
    const response = await fetch('example.com')
    const ordersData = await response.json()

    this.setState({
      orders: ordersData.data,

    })

    let order = this.state.orders.map(order => ({
      ID: order.id,
      Order_ID: order.order_id,
      Date: order.created,
      Amount: order.total_amount,
      Payment_Provider: order.payments[0].provider_id,
      Payment_ID: order.payments[0].id,
      Refund_Reason: order.reason
    }))

    const objectToCsv = (order) => {

      const csvRows = [];
      const headers = Object.keys(order[0])
      csvRows.push(headers.join(','));

      // console.log(csvRows)

      for (const row of order) {
        const values = headers.map(header => {
          const escaped = ('' + row[header]).replace(/"/g, '\\"')
          return `"${escaped}"`
        })
        csvRows.push(values.join(','))
      }

      return csvRows.join('\n')

    }

    let csvData = objectToCsv(order)

    console.log(csvData)

    // console.log(order)
    // console.log(this.state.orders)
  }

  render() {

    return (
      <div className="App">
        <Header />
        <div className="body">
          {/* <button onClick={this.getReports}>CLICK</button> */}
          <CSVLink data={csvData} onClick={this.getReports}>Click me</CSVLink>
        </div>
      </div>
    );
  }
}

export default App;

我面临的问题是我无法将 csvData 变量传递给 CsvLink 组件中的数据属性，因为该变量不是全局变量。我尝试添加另一个 csvData 状态，其中我传递了 objectToCsv(order) 并停止了错误，但是当我下载 CSV 时，内容是乱码。任何帮助深表感谢！

标签： reactjsexport-to-csv

解决方案

我已将以下内容添加到我的 getReports 函数并删除了 csvLink 组件，并且我能够将数据导出到 CSV 文件，但这绝对不是一个好的用户体验。我仍然需要努力将输入分成列。

const blob = new Blob([csvData], { type: 'text/csv' })
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.setAttribute('hidden', '')
a.setAttribute('href', url)
a.setAttribute('download', 'download.csv')
document.body.appendChild(a)
a.click()

推荐阅读