如何使用React保存API响应的CSV文件？

rslzwgfq 于 2023-03-05 发布在 React

关注(0)|答案(2)|浏览(120)

在我的应用程序中，我需要在我的计算机上保存一个来自API响应的CSV文件。发送POST请求的函数是（我使用Redux）：

export const postCsv = sensorData => (dispatch, getState) => {

  const token = getState().auth.token;

  // Headers
  const config = {
    headers: {
      'Content-Type': "application/json"
    }
  }

  // If token exists, add to headers config
  if (token) {
    config.headers['Authorization'] = `Token ${token}`
  }

  // Post request to API
  axios.post(`${baseURL}/sensors_data/csv`, sensorData, config)
  .then(res => {
    console.log(res);
    if (res.status === 200) {
      dispatch({
        type: POST_CSV,
        payload: res.data
      })
    }
  })
  .catch(err => {
    console.log(err.response);
  })
}

API的响应为：

我在点击按钮后执行postCsv函数。正如你所看到的，响应代码是200，并且每一个数据都被正确发送。我只是不知道我应该做些什么来下载和保存文件。有人能帮忙吗？

csv

来源：https://stackoverflow.com/questions/65684497/how-to-save-csv-file-from-api-response-using-react

2条答案

按热度按时间

ar7v8xwq1#

const downloadFile = () => {
      const url = window.URL.createObjectURL(new Blob([response.data])) 
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', "yourfilename.csv")
      document.body.appendChild(link)
      link.click()
      link.remove()
  }

赞(0）回复(0）举报 2023-03-05

pgccezyw2#

正如this thread中的@cocco所建议的那样，可以动态生成一个带有**download**属性的锚。

**注意：**为了简单起见，我将演示如何使用useEffect和一个伪HttpClient服务从API获取数据部分，伪HttpClient服务具有一个返回数据的静态get方法。

import React, { useState, useEffect } from "react";

import HttpClient from "./HttpClient";
import "./style.css";

export default function App() {
  const [dataInCSV, setDataInCSV] = useState("");

  useEffect(() => {
    HttpClient.get().then(res => setDataInCSV(res));
  }, []);

  return (
    <div>
      {dataInCSV && (
        <a
          href={`data:text/csv;charset=utf-8,${escape(dataInCSV)}`}
          download="filename.csv"
        >
          download
        </a>
      )}
    </div>
  );
}

这里有一个**Working Sample Code Example**供您参考。

赞(0）回复(0）举报 2023-03-05

我来回答

如何使用React保存API响应的CSV文件？

2条答案

相关问题

热门标签

最新问答