Axios通过后端从生成的文件名下载文件

 收藏

I am using Axios to send POST request to my backend.

后端会产生一个Excel文件,其名称例如testing.xlsx。

我正在尝试做的是:

使用从后端生成的相同文件名来执行此文件,我已经尝试过Postman,并且一切正常。

我尝试过的

axios.post(`${env.ENDPOINT}reports/sales/customers_statement`, {
    customers_id: form_data.customers_id,
    from_date: form_data.from_date,
    to_date: form_data.to_date,
  },{
    responseType: 'blob'
  }).then((res) => {
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    const file_name = `${new Date().toISOString().slice(0,10)}.xlsx`; // RENAME HERE
    link.href = url;
    link.setAttribute('download', file_name);
    document.body.appendChild(link);
    link.click();
    resolve(res.data);
  }).catch((e) => {
    reject(e);
  });

这可以正常工作,但不会按服务器生成的文件名下载文件。

换句话说,我想向后端发送请求,以使用已经从后端生成的文件名下载文件,就像我使用Postman发送请求时一样。

回复
  • 这是因为您将下载属性设置为file_name值,该值与返回的文件名服务器不同

     const file_name = `${new Date().toISOString().slice(0,10)}.xlsx`; 
    

    尝试将以上内容更改为此

    const contentDisposition = data.headers['content-disposition'];
    const filename = getFilenameFromContentDisposition(contentDisposition);
    link.setAttribute('download', file_name);
    

    并编写一个提取文件名的函数

      function getFilenameFromContentDisposition(contentDisposition){
        const regex = /filename=(?<filename>[^,;]+);/g;
        const match = contentDisposition.match(regex);
        const filename = match[0];
        return filename;
      }