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

原创已于 2022-02-07 14:43:38 修改 · 4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #后端 #javascript

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

vue 专栏收录该内容

25 篇文章

订阅专栏

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

// 错误方法：
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
}