当前位置：首页 > article >正文

关于在vue2中接受后端返回的二进制流并进行本地下载

article 2024/10/26 19:12:32

后端接口返回：

前端需要在两个地方写代码：

1.封装接口处，responseType: 'blob'

2.接收相应处

download() {
      if (this.selectionList.length == 0) {
        this.$message.error("请选择要导出的数据！");
      } else {
        examineruleExport().then((res) => {
          // 处理二进制数据并创建 Blob 对象
          const blobObj = new Blob([res], { type: 'application/octet-stream' });
          // 创建一个链接并设置下载属性
          const downloadLink = document.createElement("a");
          let url = window.URL || window.webkitURL || window.moxURL; // 兼容不同浏览器的 URL 对象
          url = url.createObjectURL(blobObj);
          downloadLink.href = url;
          downloadLink.download = '东宋泵站绩效考核评分标准表.xlsx'; // 设置下载的文件名
          // 将链接添加到 DOM 中，模拟点击
          document.body.appendChild(downloadLink);
          downloadLink.click();
          // 移除创建的链接和释放 URL 对象
          document.body.removeChild(downloadLink);
          window.URL.revokeObjectURL(url);
        });
      }
    },

具体内容参考：vue 将后端返回的二进制流进行处理并实现下载_vue 二进制流下载文件-CSDN博客

查看全文

http://www.kler.cn/news/366235.html