美文网首页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