如何从api react.js下载excel响应

Question

我的api响应像这个演示[URL][https://mytutari.com/webservices/contract/exportcallnote/10377431]如果我点击URL它会自动下载。但是当我试图在axios响应中使用post请求发布一些数据时，我得到了这个如何处理。<<strong> API响应/strong>

> PKk)S docProps/PKk)SéÙ£docProps/app.xmlÏ1ƒ0ཿB²kl‡R$êR:w°ÝCrjÀÜIrý÷M)Ô½ããÁÇ{ª]ý”-¢#¬Å±(EhÈ:jñènùEd‘5Z=B-6ˆ¢mêh†Àb–Œµ™çJÊhFð:©ÆÔô¼æÃ
> ©ï+™—dy*˳„•-Ø|þâ+Vÿ‹Z2Ÿ}ñÙmsòÕë©sšRÉ=(¹ßhÞPKk)S…]ØÓ
> docProps/core.xmlm‘ËNÃ0E÷|Eä}b;¨²’t*Ø ÎZÄÙ¦iùz’´
> uçñ=>šñ‹­n“ ú ¬)  ÏIÐH[+Ó”äyµLç$  L
> ­5X’²¨.PKk)S  docProps/PKk)SéÙ£docProps/app.xmlÏ1ƒ0ཿB²kl‡R$êR:w°ÝCrjÀÜIrý÷M)Ô½ããÁÇ{ª]ý”-¢#¬Å±(EhÈ:jñènùEd‘5Z=B-6ˆ¢mêh†Àb–Œµ™çJÊhFð:©ÆÔô¼æÃ
> ©ï+™—dy*˳„•-Ø|þâ+Vÿ‹Z2Ÿ}ñÙmsòÕë©sšRÉ=(¹ßhÞPKk)S…]ØÓ
> docProps/core.xmlm‘ËNÃ0E÷|Eä}b;¨²’t*Ø ÎZÄÙ¦iùz’´
> uçñ=>šñ‹­n“ ú ¬)  ÏIÐH[+Ó”äyµLç$  L ­5X’²¨.

API调用

```const formData = new FormData();
formData.append("DealerID", DealerID);
formData.append("FomDate", fromdate);
formData.append("ToDate", toDate);
formData.append("FixedDateParameter", FixedDateParameter);
formData.append("export_type", export_type);
//api
const dashboardexport_response = await dashboardexport({ formData });```

dashboardexport

let url = API + "/dashboard/dashboardexport";
formData.append("pcp_user_id", pcp_user_id);
formData.append("role_id", role_id);
formData.append("user_id", user_id);
try {
const response = await axios.post(url, formData, { header });
return response.data;
} catch (error) {
throw Error(error);
}
};```

Answer 1

你可以这样做:

axios.post(url, {
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `${Date.now()}.xlsx`);
document.body.appendChild(link);
link.click();
});

来源

Answer 2

import axios, { AxiosRequestConfig } from 'axios';
import fs from 'fs';
export const downloadXLSFile = async () => {

// Its important to set the 'Content-Type': 'blob' and responseType:'arraybuffer'.
const headers = {'Content-Type': 'blob'};
const config: AxiosRequestConfig = {method: 'GET', url: URL, responseType: 'arraybuffer', headers};

try {
const response = await axios(config);

const outputFilename = `${Date.now()}.xls`;
// If you want to download file automatically using link attribute.
const url = URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', outputFilename);
document.body.appendChild(link);
link.click();
// OR you can save/write file locally.
fs.writeFileSync(outputFilename, response.data);
} catch (error) {
throw Error(error);
}
}

Answer 3

值得注意的是，其他答案忘记从下载后的页面删除link元素。

const url = window.URL.createObjectURL(new Blob([data.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute(
'download',
`${Date.now()}.xlsx`,
);
document.body.appendChild(link);
link.click();
link.remove();

Answer 4

这对我来说很好。请安装以下模块

//npm i file-saver
//npm i xlsx
import React from 'react'
import Button from 'react-bootstrap/Button';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
export const ExportCSV = () => {
const[csvData,setCsvData]=React.useState([{"Name":"Gowri"}, 
{"Name":"Siva"},{"Name":"Teja"},{"Name":"USA"}])
const[fileName,setFileName]=React.useState("Reports");
const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const fileExtension = '.xlsx';
const exportToCSV = (csvData, fileName) => {
const ws = XLSX.utils.json_to_sheet(csvData);
const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' 
});
const data = new Blob([excelBuffer], {type: fileType});
FileSaver.saveAs(data, fileName + fileExtension);
}
return (
<Button variant="warning" onClick={(e) => exportToCSV()}>Export</Button>
)
}