前端文件下载

通过后端接口下载

window.open(url)

用法：window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。

这样下载会打开一个新的窗口，如果下载错误，会在新的窗口展示错误信息（窗口名字为_blank时）

封装download方法

文件较小的download方法（a链接下载）

这种方式适用于下载的文件小，如果文件大会导致崩溃或者页面无响应，或显示下载失败
在request中封装download方法

// 通用下载方法
export function download(url, params, filename, method) {
  service.defaults.timeout = 1000 * 60 * 60 * 12
  return service[method || "post"](url, params, {
    transformRequest: [(params) => {
      return tansParams(params)
    }],
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    responseType: 'blob'
  }).then((data, header) => {
    const content = data
    console.log('ccc',content)
    const blob = new Blob([content])
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      console.log('qq',elink)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    } else {
      navigator.msSaveBlob(blob, filename)
    }
  }).catch((r) => {
    console.error(r)
  })
}

在main.js中进行全局绑定

import { download } from '@/utils/request'
Vue.prototype.download = download

在文件中使用

//参数：接口URL，参数，下载的文件名称，请求方式
 this.download(`/model/packageModel/${row.uuid}/${this.userInfo.dsId}`,"", `final_model.tar`, "get");

window.open 和 a 链接组合（隐藏a链接）

通过a链接下载 会出现屏幕闪的问题，下载时打开新页面，下载之后关闭页面，体验感非常不好

//a 链接的target 指向iframe 的那name，就会跳转到iframe ，把iframe设置隐藏，就不会在页面展示
 <a id="link" :href="downloadUrl +`/model/packageModelForPassive/${list.uuid}/${userInfo.dsId}`"  target="toIframe" @click="warnMessage()">
     <img src="@/assets/images/img-share.png" alt="导出" />
 </a>
 <iframe
            id="ii"
            name="toIframe"
            style="visibility: hidden; height: 1px">
</iframe>

warnMessage() {
      var msgOption = this.$message({
        message: "正在打包，请稍等",
        type: "warning",
        duration: 10000,
      });
      var a = null;
      //通过定时器刷新页面的iframe 信息，如果打包失败会有失败信息 code msg 等，如果打包成功返回是一个 流 ，就没有iframe 数据
      a = setInterval(() => {
      // ！= null说明出错，页面出现了 iframe 结构，toIframe是html中iframe的name，"pre"是包裹错误提示信息的标签，
        if (window.frames["toIframe"].document.querySelector("pre") != null) {
        //  .textContent 获取改标签的value
          var obj = window.frames["toIframe"].document.querySelector("pre").textContent;
          //我们的错误标识，code == 1 说明错误，返回来的是JSON字符串，记得要转换
          if (JSON.parse(obj).code == 1) {
            this.$message({
              message: JSON.parse(obj).msg || "失败",
              type: "error",
            });
            //手动关闭弹框
            msgOption.close();
            clearInterval(a);
          }
        } else {
          this.$message({
            message: "下载成功",
            type: "success",
          });
          msgOption.close();
          clearInterval(a);
        }
      }, 3000);
    },

文件较大的download方法（插件下载）

首先安装（基于Vue，也可以去访问gitHub上下载：https://github.com/eligrey/FileSaver.js）

npm install file-saver --save

引入方法

import { saveAs } from ‘file-saver’;

通过调用上面引入的方法来接收很大的文件流

//传递参数及绑定全局与 文件较小的download方法  绑定相同

//实际使用方法
export function download(url, params, filename, method) {
  return service[method || "post"](url, params, {
    transformRequest: [(params) => {
      return tansParams(params)
    }],
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    responseType: 'blob'
  }).then((data, header) => {
    console.log('asd',data)
    const blob = new Blob([data], {
      type: 'application/zip'
    })
    saveAs(blob, filename)
  })
  .catch((r) => {
    console.error(r)
  })
}



//使用方法
export function exportZip(res, name) {
  const blob = new Blob([res.data], {
    type: 'application/zip'
  })
  saveAs(blob, name)
}

js-file-download插件下载

import fileDownload from 'js-file-download'

methods:{
  exportModel(row.uuid, this.userInfo.dsId).then((res) => {
   fileDownload(res, 'test.tar')
  }
}

XML方法下载

// XML 下载方法
export function xmlDownload( url, method) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader(
    "Content-type",
    "application/x-www-form-urlencoded"
  );
  xhr.setRequestHeader("Authorization", "Bearer " + getToken());
  xhr.send();
  xhr.responseType = "blob"; // 返回类型blob
  xhr.onload = function () {
    let a = document.createElement("a");
    console.log(this)
    let blob = new Blob([this.response], {
      // type: "text/csv;charset=GBK;",
      type: "application/x-tar;", //下载tar包
    });
    let objectUrl = URL.createObjectURL(blob);
    a.setAttribute("href", objectUrl);
    a.setAttribute("download", 'final_model.tar');
    a.click();
  }
}