vue导出文件流，blob数据类型导出

最新推荐文章于 2025-06-04 11:01:37 发布

原创最新推荐文章于 2025-06-04 11:01:37 发布 · 680 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讲述了如何处理一个接口请求返回的数据，特别是从headers[content-disposition]中提取文件名，并使用Blob对象创建文件，然后利用a标签实现文件下载的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口请求返回的数据如下：

处理代码：

let onExport = (res) => {
  //因为我这边的接口返回的文件名在headers['content-disposition']里面所以这么处理
  const fileNameEncode = res.headers['content-disposition'].split('filename=')[1]
  //文件名
  const fileName = decodeURIComponent(fileNameEncode)
  let blob  = new Blob([res.data], { type: 'application/vnd.ms-excel' });
  let url = window.URL.createObjectURL(blob);
  const link = document.createElement('a'); // 创建a标签
  link.href = url;
  link.download = fileName;
  link.click();
  URL.revokeObjectURL(url);
}