"如何從api react.js下載excel以響應"

Question

我的 api 響應像這個演示 [URL][https://mytutari.com/webservices/contract/exportcallnote/10377431] 如果我點擊 url 它會自動下載。 但是當我嘗試在 axios 響應中使用 POST 請求發布一些數據時，我得到了如何處理。 API 響應

> 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 });```

儀表板出口

  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

值得注意的是，其他答案忘記在下載后從頁面中刪除鏈接元素。

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