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

摘要： 之前處理檔案下載功能一直使用的是window.open(URL)的方式。這樣當然也是可以實現檔案下載功能的，而且使用起來還很方便。 但是有一次測試發現這個方法在Safari瀏覽器中並不能正常下載，於是我又開始尋找相容性更好的下載功能實現方案。今天給大家推薦的是一個我目前一直在使用，而且到目...

之前處理檔案下載功能一直使用的是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事件時，對應值還沒有成功渲染，會導致無法成功下載。

經過測試這個方法是完全能夠滿足絕大部門需求的，如果你還有什麼其他方案，歡迎分享出來，大家一起學習，共同進步。

結束語

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