前端文件下載兼容方案（兼容主流瀏覽器，包括IE與Safari）

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事件時，對應值尚未成功渲染，會致使沒法成功下載。

通過測試這個方法是徹底可以知足絕大部門需求的，若是你還有什麼其餘方案，歡迎分享出來，你們一塊兒學習，共同進步。

結束語

若是你喜歡本篇文章歡迎點贊、關注。你的支持是我繼續分享的最大動力。