Blob下载二进制文件

缘由:

遇到后台返回二进制流文件(如excel,zip压缩文件等)
浏览器不会自动接收下载该文件,需要前后端共同合作。

解决方法:

可以创建<a>标签并使用Blob对象进行接收和下载(后端需修改返回数据头部信息)
别忘记删除<a>标签和释放Blob对象

### 代码展示:
// 导出信息
  public async exportMeeting() {
    // 单独设置导出接口返回类型为blob
    const url = baseUrl + 'seeta/synchro/export';
    const data = { meeting_key: this.selectMeetingKey };
    // 必须设置{responseType: 'blob'},否则返回二进制流接收时会出错
    const res = await axios.post(url, data, {responseType: 'blob'});
    if (res) {
      const blob = new Blob([res.data]);
      const downloadElement = document.createElement('a');
      const href = window.URL.createObjectURL(blob); // 创建下载的链接
      downloadElement.href = href;
      downloadElement.download = '会议表.xls'; // 下载后文件名
      document.body.appendChild(downloadElement); // 追加a标签
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    }
  }

Tips:

创建下载文件时需要确定文件类型,否则下载后文件打开出错
而使用PostMan直接访问二进制流文件可直接下载解析为正确类型
后续研究中...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容