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();
      }
    },