美文网首页Vue前端
Blob下载二进制文件

Blob下载二进制文件

作者: 打酱油12138 | 来源:发表于2019-04-11 18:17 被阅读9次

缘由:

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

解决方法:

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

### 代码展示:
// 导出信息
  public async exportMeeting() {
    // 单独设置导出接口返回类型为blob
    const url = baseUrl + 'seeta/synchro/export';
    const data = { meeting_key: this.selectMeetingKey };
    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直接访问二进制流文件可直接下载解析为正确类型
后续研究中...

相关文章

网友评论

    本文标题:Blob下载二进制文件

    本文链接:https://www.haomeiwen.com/subject/xhippqtx.html