[筆記] JavaScript 按鈕自動下載類型與程式碼

章節連結

這回在實務上遇上:讓使用者在點「下載」按鈕後,就幫使用者自動下載到本機端。這邊筆記下可能會用到的常用類型方法,以及要注意的事項。

javascript es6 logo


說明

PDF, Microsoft Office 系列檔案

若是一般的文件系列檔案,這在 HTML5 的預設行為中是可以直接被下載下來的,所以你僅需要在使用者點選按鈕後,幫使用者建立一個 <a> 標籤、加上 download 和 href 的內容,再幫使用者點選即可

圖片和 txt 文字檔

由於瀏覽器預設是會「另開視窗」打開這兩個檔案,並不會自動幫你下載到本機端。因此,你需要先行將圖片和文字先取到本機端後,產生一個 local 端地暫存。接著用幫使用者點下這個暫存檔的所在連結。

注意事項

需要注意 CORS 的問題。若後端伺服器並沒有回傳對應的 Response Header,那就有機會被瀏覽器給拒絕而無法下載。


程式碼

按讚加入粉絲團

延伸閱讀