如何从apireact.js下载excel响应

Question

我的 api 的响应类似于此演示 [URL][https://mytutari.com/webservices/contract/exportcallnote/10377431] 如果我单击 url，它会自动下载。但是当我尝试在 axios 响应中使用 POST 请求发布一些数据时，我得到了如何处理的信息。\n API 响应

\n

> PKk)S docProps/PKk)S\xc3\xa9\xc3\x83\xe2\x84\xa2\xc2\xa3docProps/app.xml\xc3\x8f1\xc6\x920\xc3\xa0\xc2\xbd\xc2\xbfB\xc2\xb2kl\xe2\x80\xa1R$\xc3\xaaR:w\xc2\xb0\xc3\x9dCrj\xc3\x80\xc3\x9cIr\xc3\xbd\xc3\xb7M)\xc3\x94\xc2\xbd\xc3\xa3\xc3\xa3\xc3\x81\xc3\x87{\xc2\xaa]\xc3\xbd\xe2\x80\x9d-\xc2\xa2#\xc2\xac\xc3\x85\xc2\xb1(Eh\xc3\x88:j\xc3\xb1\xc3\xa8n\xc3\xb9Ed\xe2\x80\x985Z=B-6\xcb\x86\xc2\xa2m\xc3\xaah\xe2\x80\xa0\xc3\x80b\xe2\x80\x93\xc5\x92\xc2\xb5\xe2\x84\xa2\xc3\xa7J\xc3\x8ahF\xc3\xb0:\xc2\xa9\xc3\x86\xc3\x94\xc3\xb4\xc2\xbc\xc3\xa6\xc3\x83\n> \xc2\xa9\xc3\xaf+\xe2\x84\xa2\xe2\x80\x94dy*\xc3\x8b\xc2\xb3\xe2\x80\x9e\xe2\x80\xa2-\xc3\x98|\xc3\xbe\xc3\xa2+V\xc3\xbf\xe2\x80\xb9Z2\xc5\xb8}\xc3\xb1\xc3\x99ms\xc3\xb2\xc3\x95\xc3\xab\xc2\xa9s\xc5\xa1R\xc3\x89=(\xc2\xb9\xc3\x9fh\xc3\x9ePKk)S\xe2\x80\xa6]\xc3\x98\xc3\x93\n> docProps/core.xmlm\xe2\x80\x98\xc3\x8bN\xc3\x830E\xc3\xb7|E\xc3\xa4}b;\xc2\xa8\xc2\xb2\xe2\x80\x99t*\xc3\x98 \xc3\x8eZ\xc3\x84\xc3\x99\xc2\xa6i\xc3\xb9z\xe2\x80\x99\xc2\xb4\n> u\xc3\xa7\xc3\xb1=>\xc5\xa1\xc3\xb1\xe2\x80\xb9\xc2\xadn\xe2\x80\x9c \xc3\xba\xc2\xa0\xc2\xac)  \xc3\x8fI\xc3\x90H[+\xc3\x93\xe2\x80\x9d\xc3\xa4y\xc2\xb5L\xc3\xa7$  L\n> \xc2\xad5X\xe2\x80\x99\xc2\xb2\xc2\xa8.PKk)S  docProps/PKk)S\xc3\xa9\xc3\x83\xe2\x84\xa2\xc2\xa3docProps/app.xml\xc3\x8f1\xc6\x920\xc3\xa0\xc2\xbd\xc2\xbfB\xc2\xb2kl\xe2\x80\xa1R$\xc3\xaaR:w\xc2\xb0\xc3\x9dCrj\xc3\x80\xc3\x9cIr\xc3\xbd\xc3\xb7M)\xc3\x94\xc2\xbd\xc3\xa3\xc3\xa3\xc3\x81\xc3\x87{\xc2\xaa]\xc3\xbd\xe2\x80\x9d-\xc2\xa2#\xc2\xac\xc3\x85\xc2\xb1(Eh\xc3\x88:j\xc3\xb1\xc3\xa8n\xc3\xb9Ed\xe2\x80\x985Z=B-6\xcb\x86\xc2\xa2m\xc3\xaah\xe2\x80\xa0\xc3\x80b\xe2\x80\x93\xc5\x92\xc2\xb5\xe2\x84\xa2\xc3\xa7J\xc3\x8ahF\xc3\xb0:\xc2\xa9\xc3\x86\xc3\x94\xc3\xb4\xc2\xbc\xc3\xa6\xc3\x83\n> \xc2\xa9\xc3\xaf+\xe2\x84\xa2\xe2\x80\x94dy*\xc3\x8b\xc2\xb3\xe2\x80\x9e\xe2\x80\xa2-\xc3\x98|\xc3\xbe\xc3\xa2+V\xc3\xbf\xe2\x80\xb9Z2\xc5\xb8}\xc3\xb1\xc3\x99ms\xc3\xb2\xc3\x95\xc3\xab\xc2\xa9s\xc5\xa1R\xc3\x89=(\xc2\xb9\xc3\x9fh\xc3\x9ePKk)S\xe2\x80\xa6]\xc3\x98\xc3\x93\n> docProps/core.xmlm\xe2\x80\x98\xc3\x8bN\xc3\x830E\xc3\xb7|E\xc3\xa4}b;\xc2\xa8\xc2\xb2\xe2\x80\x99t*\xc3\x98 \xc3\x8eZ\xc3\x84\xc3\x99\xc2\xa6i\xc3\xb9z\xe2\x80\x99\xc2\xb4\n> u\xc3\xa7\xc3\xb1=>\xc5\xa1\xc3\xb1\xe2\x80\xb9\xc2\xadn\xe2\x80\x9c \xc3\xba\xc2\xa0\xc2\xac)  \xc3\x8fI\xc3\x90H[+\xc3\x93\xe2\x80\x9d\xc3\xa4y\xc2\xb5L\xc3\xa7$  L \xc2\xad5X\xe2\x80\x99\xc2\xb2\xc2\xa8.\n

\n

API调用

\n

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

\n

仪表板导出

\n

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

\n

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

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

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();