1、使用 location.href

// 適用於瀏覽器無法識別檔案，如果是html、jpg、pdf等會直接解析展示，而不會下載

window.location.href = url 

2、使用 window.open

// 適用於瀏覽器無法識別檔案，如果是html、jpg、pdf等會直接解析展示，而不會下載

window.open(url)

3、a 標籤

// 適用於單檔案下載或需要自定義檔名稱

//寫法1
const download = (filename, url) => {
    let a = document.createElement('a'); 
    a.style 
 
= 'display: none'; // 建立一個隱藏的a標籤
    a.download = filename;
    a.href = url;
    document.body.appendChild(a);
    a.click(); // 觸發a標籤的click事件
    document.body.removeChild(a);
}
// 寫法2
< a href="/images/download.jpg" download="myFileName">

4、檔案流

step1 傳送請求，有兩種方式

// 此種方式的優點是支援多檔案下載、post下載、自定義檔名稱，流程是向後端傳送post請求，後端返回檔案流，前端將檔案流轉成下載連結
 


// 原生js請求寫法（不可以使用JQuery，因為JQuery不支援blob型別）
function download() {
　　　  const req = new XMLHttpRequest();
　　　　req.open('POST', '/download/excel', true);
　　　　req.responseType = 'blob'; //如果不指定，下載後文件會打不開
　　　　req.setRequestHeader('Content-Type', 'application/json');
　　　　req.onload = function() {
　　　　　　var content = req.getResponseHeader("Content-Disposition") ;
　　　　　　
 
// 檔名最好用後端返的Content-disposition
　　　　　　// 需要後端設定 Access-Control-Expose-Headers: Content-disposition 使得瀏覽器將該欄位暴露給前端
　　　　　　var name = content && content.split(';')[1].split('filename=')[1];
　　　　　　var fileName = decodeURIComponent(name)
　　　　　　downloadFile(req.response,fileName)  // 呼叫將檔案流轉成檔案的方法，後面有寫
　　　　};
　　　　req.send( JSON.stringify(params));

}

// axios請求寫法
function download() {
　　axios({
　　　　method: 'post',
　　　　headers: {
　　　　　　'Content-Type': 'application/json; charset=utf-8'
　　　　},
　　　　url: '/robot/strategyManagement/analysisExcel',
　　　　responseType: 'blob',
　　　　headers: { //如果需要許可權下載的話，加在這裡
　　　　　　Authorization: '123456'
　　　　}
　　　　data: JSON.stringify(params),
　　}).then(function(res){
　　　　var content = res.headers['content-disposition'];
　　　　var name = content && content.split(';')[1].split('filename=')[1];
　　　　var fileName = decodeURIComponent(name)
　　　　downloadFile(res.data,fileName)// 呼叫將檔案流轉成檔案的方法，後面有寫
　　}) 
}

step2 處理檔案流下載

　　方式一：通過URL.createObjectURL()下載

// URL.createObjectURL() 靜態方法會建立一個DOMString，其中包含一個表示引數中給出的物件的URL。這個 URL 的生命週期和建立它的視窗中的document繫結

downloadFile:function(data,fileName){
    // data為blob格式
    var blob = new Blob([data]);
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    downloadElement.download = fileName;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);
}

　　方式二：通過# FileReader.readAsDataURL()下載

// readAsDataURL() 方法會讀取指定的 Blob 或 File 物件。讀取操作為非同步操作，當讀取完成時，可以從onload回撥函式中通過例項物件的result屬性獲取data:URL格式的字串（base64編碼），此字串即為讀取檔案的內容，可以放入a標籤的href屬性中
downloadFile:function(data,fileName){
   const reader = new FileReader()
   // 傳入被讀取的blob物件
   reader.readAsDataURL(data)
   // 讀取完成的回撥事件
   reader.onload = (e) => {
       let a = document.createElement('a')
       a.download = fileName
       a.style.display = 'none'
       // 生成的base64編碼
       let url = reader.result
       a.href = url
       document.body.appendChild(a)
       a.click()
       document.body.removeChild(a)
   }
}

　readAsDataURL 和createObjectURL 對比