vue下载文件流

下载文件流

1.第一种
element-ui基础框架上的一个下载 {responseType: ‘Blob’}
代码封装在untils.js的一个单独文件中

  /**
   * 判断是否IE浏览器，为IE返回true
   * @returns {boolean}
   */
  isIE() {
    let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    let isIE =
      userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
    let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
    let isIE11 =
      userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
    if (isIE || isEdge || isIE11) {
      return true;
    } else {
      return false; //不是ie浏览器
    }
  }

  _webDownLoadFileConfirm(fileName, blob) {
    if (!this.isIE()) {
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  }

  webDownLoadFile(fileName, blob) {
    if (!fileName || !blob) {
      return false;
    }
    if (!blob.type) {
      Message.error("下载失败");
      return false;
    }
    if (blob.type === "application/json") {
      let reader = new FileReader();
      reader.readAsText(blob, "utf-8");
      reader.onload = () => {
        let result = JSON.parse(reader.result);
        if (result.result) {
          this._webDownLoadFileConfirm(fileName, blob);
        } else {
          Message.error(result.info || "下载失败");
        }
      };
    } else {
      this._webDownLoadFileConfirm(fileName, blob);
    }
  }

使用：
第一步 ：引入文件

import { utils } from "@utils/utils"; //博主自己的文件路径

第二步：在下载点击事件上面使用

   downRowEvent() {
        //请求接口将接口返回数据res {responseType: 'Blob'}使用就可以了
         utils.webDownLoadFile(`名字`, res);
    },

第二种：

const download = (id, name) => {
  const aUrl = url  + id
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = aUrl
  a.target = '_blank'
  a.setAttribute('download', name)
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

引入使用

  download(id, name)