实现文件、压缩包下载——vue2

1.后端直接返回下载路径

使用a标签实现下载功能


页面代码：
使用a标签实现

2.返回文件流格式

后端返回格式Blob

接口要设置返回类型

export function exportAccountInfo(data) {
  let url = '/#/#/#';
  return request({
    url: url,
    method: 'post',
    responseType: 'blob',//arraybuffer
    data: data
  })
}

代码实现

async _download(row) {
      const res = await fileDownload({ url: row.dataUrl });
      if (res.status == 200) {
        let blob = new Blob([res.data], {
          type: 'application/x-download;charset=utf-8',//跟后端确定
        });
        //type:application/vnd.ms-excel;charset=UTF-8;excel下载
        let objectUrl = URL.createObjectURL(blob);
        if ('download' in document.createElement('a')) {
          let link = document.createElement('a');
          link.href = objectUrl;
          link.download = '文件名' + '文件后缀名';
          //此写法兼容火狐浏览器
          document.body.appendChild(link);
          let evt = document.createEvent('MouseEvents');
          evt.initEvent('click', false, false);
          link.dispatchEvent(evt);
          window.URL.revokeObjectURL(objectUrl);
        } else {
          navigator.msSaveBlob(blob, '文件名' + '文件后缀名');
        }
      } else {
        this.$message.error(res.statusText);
      }
    },

返回信息

与FileReader.readAsDataURL(file)区别

主要区别
通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
执行时机
createObjectURL是同步执行（立即的）
FileReader.readAsDataURL是异步执行（过一段时间）
内存使用
createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
优劣对比
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL
与FileReader.readAsDataURL(file)区别：原文链接：https://blog.csdn.net/weixin_44116302/article/details/122050793

//导出
exportResults(row){
      this.listLoading = true;
      exportAccountInfo({accountId:row.accountId})
        .then(res => {
          this.listLoading = false;
          if (res.status == 200) {
            console.log(res,1111);
            //里面的第二个参数要与后端对应上
            let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8" });
            console.log(blob,22222);
            //decodeURIComponent解码获取文件名，这个文件名不一定需要，看需求和后端返回
            const fileName = decodeURIComponent(res.headers['content-disposition'].match(/filename=(.*)/)[1]);
            //拿到url
            //参数是用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
            let objectUrl = URL.createObjectURL(blob);
            console.log(objectUrl,3333);
            if ("download" in document.createElement("a")) {
              let link = document.createElement("a");
              link.href = objectUrl;
              link.download = fileName;
              //此写法兼容火狐浏览器
              document.body.appendChild(link);
              let evt = document.createEvent("MouseEvents");
              evt.initEvent("click", false, false);
              link.dispatchEvent(evt);
              // URL.revokeObjectURL() 方法来释放调用 createObjectURL() 方法时创建的已经不再需要的 URL 对象,
              window.URL.revokeObjectURL(objectUrl);
            } else {
              navigator.msSaveBlob(blob, fileName);
            }
          } else {
            this.$message.error(res.statusText);
          }
        })
        .catch(error => {});
    },

excel文件下载

设置请求返回类型（跟后端确认）

返回的数据

// 模板下载
    async excelDownload() {
      const res = await downloadDoctor();
      console.log(res,999)
      if (res.status == 200) {
        let blob = new Blob([res.data], {
          type: 'application/vnd.ms-excel;charset=UTF-8',
        });
        let objectUrl = URL.createObjectURL(blob);
        console.log(objectUrl, 111);
        if ('download' in document.createElement('a')) {
          let link = document.createElement('a');
          link.href = objectUrl;
          link.download = 'Excel模板' + '.xlsx';

          //此写法兼容火狐浏览器
          document.body.appendChild(link);

          let evt = document.createEvent('MouseEvents');
          evt.initEvent('click', false, false);
          link.dispatchEvent(evt);

          window.URL.revokeObjectURL(objectUrl);
        } else {
          navigator.msSaveBlob(blob, 'Excel模板' + '.xlsx');
        }
      } else {
        this.$message.error(res.statusText);
      }
    },