2018年10月26日更新
評論區大家提出了很多留存的問題，比如說不能相容IE11，不能下載txt和video檔案等問題。txt和video的下載問題我還沒有證實。不過這些意見都十分可貴。
另外還有人給出了一系列的解決方案，比如利用jszip實現檔案批量打包下載；使用fileSaver.js + Blob的方式進行檔案下載等。雖然我還沒來得及去一一驗證，但是很感謝大家給出的寶貴方案，也為瀏覽到本篇文章的讀者們提供了一條解決問題的思路。
雖然讓人難以置信，但是我剛才試了一下，直接對location賦值的方式進行檔案下載，實驗結果竟然相當好，不但在IE11中能夠正常下載，在Safari中也可以正常下載。
具體實現方式如下：
window.location.href = yourFilePath
複製程式碼這裡的yourFilePath是呼叫後臺檔案下載的介面地址。後臺在介面中返回檔案流供前端下載。
其實我在下面所說的downLoadTemplateURL也是指的後臺檔案下載的介面地址。一開始表述的不太清晰，可能會造成一部分讀者的誤解，在此特地宣告一下。
之前處理檔案下載功能一直使用的是window.open(URL)的方式。這樣當然也是可以實現檔案下載功能的，而且使用起來還很方便。
但是有一次測試發現這個方法在Safari瀏覽器中並不能正常下載，於是我又開始尋找相容性更好的下載功能實現方案。今天給大家推薦的是一個我目前一直在使用，而且到目前為止還沒有發現相容性問題的一個解決方案。當然，如果大家在使用過程中發現此方案存在什麼bug，也歡迎在評論區進行發言，發現問題，解決問題，才能促使大家共同成長。
其實html中的<a>標籤不光有導航連結的作用，同時還能實現檔案下載功能。具體用法如下：
<a id="downLoadExcel" :href="downLoadTemplateURL" :download="filename"></a>
複製程式碼在<a>標籤中新增download屬性即可實現點選下載功能。這裡最好在前端指定下載的檔名，因為有時候通過後臺提供檔名會產生亂碼，而由前端指定檔名則完全沒有這方面的顧慮。
downLoadTemplateURL與filename都是通過動態賦值的，這樣，無論是在開發環境還是生產環境，程式碼都可以複用，不需要進行修改。
具體實現程式碼如下：
downLoadExcelTemplate() {
const vm = this
vm.downLoadTemplateURL = vm.apiHost + "downloadYourFileURL"
vm.filename = "myTest.pdf"
setTimeout( () => {
document.querySelector("#downLoadExcel").click()
},500)
},
複製程式碼我這裡採用的是點選自定義按鈕，在自定義按鈕的點選事件中主動觸發 <a> 標籤的點選事件的方法。這樣可以在觸發下載檔案功能前進行額外操作。
至於對click進行延遲觸發——也就是使用setTimeout()方法，是為了在修改下載路徑和檔名後給瀏覽器預留足夠的時間將變數值渲染到<a>標籤中。否則在觸發click事件時，對應值還沒有成功渲染，會導致無法成功下載。
經過測試這個方法是完全能夠滿足絕大部門需求的，如果你還有什麼其他方案，歡迎分享出來，大家一起學習，共同進步。
結束語
如果你喜歡本篇文章歡迎點贊、關注。你的支援是我繼續分享的最大動力。