文件下载

url // 下载路径 
params // 传递参数路径
type // 文件类型
export function fileDownloadBack(url, params, type) {
    var fileType = "";
    if (type == "csv") {
        fileType = "text/csv"
    } else if (type == "doc") {
        fileType = "application/msword"
    } else if (type == "docx") {
        fileType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    } else if (type == "jpg") {
        fileType = "image/jpeg"
    } else if (type == "png") {
        fileType = "image/png"
    } else if (type == "pdf") {
        fileType = "application/pdf"
    } else if (type == "zip") {
        fileType = "application/zip"
    } else if (type == "zip") {
        fileType = "application/zip"
    } else if (type = 'slsx') {
        fileType = "application/vnd.ms-excel"
    }

    axios({
        method: 'post',
        url: url,
        responseType: 'blob',
        data: params
    }).then((res) => {
        console.log(res);
        if (!res) {
            return
        }
        let blob = new Blob([res.data], {
            type: fileType
        });
        let url = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url;
        document.body.appendChild(link)
        link.click()
    });
}

if (response && response.config && response.config.responseType == 'blob') { 
  // 开始处理文件下载 - res.data为文件流
  let blobUrl = window.URL.createObjectURL(new Blob([response.data], {
    // 后台传递的文件类型 - 此处我是直接写死的
    // 也可以从后台获取的
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
 }));
 const link = document.createElement('a');
 link.style.display = 'none';
 link.href = blobUrl;
 const dis = response.headers['content-disposition']
 const filenameKey = 'filename='
 const indexOf = dis.indexOf(filenameKey)
 const filename = indexOf ? decodeURI(dis.substring(indexOf + filenameKey.length)) : '未知文件名'
 // fileName 文件的名称
 link.setAttribute('download', filename)
 document.body.appendChild(link)
 link.click()
 document.body.removeChild(link)
}

直接返回一个下载地址 

downloadFile(url) {
      //下载文件
      var a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("target", "_blank");
      let clickEvent = document.createEvent("MouseEvents");
      clickEvent.initEvent("click", true, true);
      a.dispatchEvent(clickEvent);
},

放回数据流

(1) 呈现在用户面前的文件结构叫做文件的逻辑结构，逻辑结构分为两种：一种是记录式文件，另一种为流式文件。流文件 就是没有结构的文件。

(2) Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

// 使用Blob
      let blob = new Blob([res.data], { type: `text/plain;charset=utf-8` });
      // 获取heads中的filename文件名
      let downloadElement = document.createElement("a");
      // 创建下载的链接
      let href = window.URL.createObjectURL(blob);
      downloadElement.href = href;
      // 下载后文件名
      downloadElement.download = "文件名";
      document.body.appendChild(downloadElement);
      // 点击下载
      downloadElement.click();
      // 下载完成移除元素
      document.body.removeChild(downloadElement);
      // 释放掉blob对象

后端直接返回某种格式的数据本身

download(filename, text) {
      var pom = document.createElement("a");
      pom.setAttribute(
        "href",
        "data:text/plain;charset=utf-8," + encodeURIComponent(text)
      );
      pom.setAttribute("download", filename);
      if (document.createEvent) {
        var event = document.createEvent("MouseEvents");
        event.initEvent("click", true, true);
        pom.dispatchEvent(event);
      } else {
        pom.click();
      }
    },