下载文件，后端返回数据流，前端如何下载

rainbow8300

已于 2022-02-07 14:43:38 修改

阅读量3.9k

点赞数 2

分类专栏： vue 文章标签：前端后端 javascript

于 2021-12-20 17:13:41 首次发布

本文链接：https://blog.youkuaiyun.com/rainbow8300/article/details/122045688

版权

vue 专栏收录该内容

25 篇文章

订阅专栏

在Chrome新版本中，直接下载文件的方式不再适用，现在需要将后端返回的数据流转换为Blob数组格式。文章探讨了在遇到下载文件打不开的问题时，如何调整请求头和处理数据流，确保前端能正确下载文件。

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

// 错误方法：
saveBlob(blob, fileName) {
      const element = document.createElement('a');
      element.setAttribute('download', fileName);
      element.setAttribute('href', window.URL.createObjectURL(new Blob(blob)));
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
  }
 // 会报错
 // TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

在这里插入图片描述

因为Chrome更新后不支持这种用法new Blob(blob), blob需要是数组格式

// 正确写法：
saveBlob(blob, fileName) {
      const element = document.createElement('a');
      element.setAttribute('download', fileName);
      let binaryData = [];
      binaryData.push(blob);
      element.setAttribute('href', window.URL.createObjectURL(new Blob(binaryData)));
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
  }

发现下载文件打不开问题：需修改请求头

{
	method: 'get',
	responseType: 'arraybuffer',
	params
}