解决前端流文件导出和获取请求头中的文件名称

在前端下载后端返回的文件流时，获取请求头中的文件名称

在开发过程中，我们经常会遇到需要导出流文件和获取请求头中的文件名称的情况。这些问题可能看起来很简单，但在实际实现中，却会遇到各种坑和陷阱。本文将为您提供流文件导出和获取请求头中的文件名称的解决方案。

流文件导出解决方案

流文件导出通常涉及到以下几个步骤：

1. 发送请求获取流文件数据
2. 创建文件下载链接
3. 触发文件下载

以下是具体的实现步骤：

使用 XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/export', true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    var blob = new Blob([xhr.response], { type: 'application/octet-stream' });
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '文件名.xlsx'; // 此处需要手动指定文件名
    link.click();
  }
};

xhr.send();

使用 fetch API

fetch('/api/export')
  .then(response => response.blob())
  .then(blob => {
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '文件名.xlsx'; // 此处需要手动指定文件名
    link.click();
  });

使用 axios API

axios({
  method: 'get',
  url: '/api/export',
  responseType: 'blob'
}).then((response) => {
//此处type根据自己业务需求调整,或者也可以不传
  const blob = new Blob([response.data], {
     type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
  const url = window.URL.createObjectURL(blob );
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', '文件名.xlsx');//扩展名根据自己业务调整
  document.body.appendChild(link);
  link.click();
})

获取请求头中的文件名称

在上述代码中，我们需要手动指定文件名，但是如果我们想动态获取文件名，应该怎么办呢？这时候，我们就需要获取请求头中的文件名称了。

以下是具体的实现步骤：

使用 XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/export', true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    var filename = xhr.getResponseHeader('Content-Disposition').split('filename=')[1];
    var blob = new Blob([xhr.response], { type: 'application/octet-stream' });
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
  }
};

xhr.send();

使用 fetch API

fetch('/api/export')
  .then(response => {
    var filename = response.headers.get('Content-Disposition').split('filename=')[1];
    return response.blob();
  })
  .then(blob => {
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
  });

使用 axios API

axios({
  method: 'get',
  url: '/api/export',
  responseType: 'blob'
}).then((response) => {
  const disposition = response.headers['content-disposition'];
  const matchArray = disposition.match(/filename="(.*)"/);
  const filename = matchArray[1];
  //此处type根据自己页面进行调整,或者也可不传
  const blob = new Blob([response.data], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
})

在上述代码中，我们使用 getResponseHeader 方法或 headers.get 方法来获取 Content-Disposition 头中的文件名称。

结论

流文件导出和获取请求头中的文件名称是前端开发常见的问题，通过使用 XMLHttpRequest 、 fetch API或者axios API，可以轻松实现文件导出和获取请求头中的文件名称。同时，后端开发者需要提供文件导出功能，需要设置 Content-Disposition 头来指定文件名。