时间戳

首页 > 解决方案 > axios 通过后端生成的文件名下载文件

javascript - axios 通过后端生成的文件名下载文件

问题描述

我正在使用Axios向我的后端发送POST请求。

后端生成一个名为testing.xlsx的Excel文件。

我正在尝试做的事情：

使用从后端生成的相同文件名执行此文件，我尝试过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 发送请求时一样。

标签： javascriptajaxaxios

解决方案

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

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

尝试将上述更改为此

const contentDisposition = data.headers['content-disposition'];
const filename = contentDisposition.match(/filename=(?<filename>[^,;]+);/)[0]; 
link.setAttribute('download', file_name);

在后端

response.setHeader("Content-disposition", "attachment; filename="+ yourfilenamehere);

推荐阅读