站長資訊網(wǎng)
javascript實現(xiàn)下載功能的方法：1、通過a標(biāo)簽實現(xiàn)下載；2、通過“window.open”方法實現(xiàn)下載；3、通過“l(fā)ocation.href”方法實現(xiàn)下載；4、通過文件流轉(zhuǎn)blob對象實現(xiàn)下載功能。
本教程操作環(huán)境：Windows10系統(tǒng)、javascript1.8.5版本、Dell G3電腦。
javascript 怎么實現(xiàn)下載功能？
js實現(xiàn)文件下載功能
一、a標(biāo)簽下載
<body> <button onClick="download()">a標(biāo)簽下載</button> <script> function download(url = 'http:www.xxx.com/download?name=file.pdf', fileName = '未知文件') { const a = document.createElement('a'); a.style.display = 'none'; a.setAttribute('target', '_blank'); /* * download的屬性是HTML5新增的屬性 * href屬性的地址必須是非跨域的地址，如果引用的是第三方的網(wǎng)站或者說是前后端分離的項目(調(diào)用后臺的接口)，這時download就會不起作用。 * 此時，如果是下載瀏覽器無法解析的文件，例如.exe,.xlsx..那么瀏覽器會自動下載，但是如果使用瀏覽器可以解析的文件，比如.txt,.png,.pdf....瀏覽器就會采取預(yù)覽模式 * 所以，對于.txt,.png,.pdf等的預(yù)覽功能我們就可以直接不設(shè)置download屬性(前提是后端響應(yīng)頭的Content-Type: application/octet-stream，如果為application/pdf瀏覽器則會判斷文件為 pdf ，自動執(zhí)行預(yù)覽的策略) */ fileName && a.setAttribute('download', fileName); a.href = url; document.body.appendChild(a); a.click(); document.body.removeChild(a); } </script> </body>
優(yōu)點：
-
可以直接下載txt、png、pdf、exe、xlsx等類型文件
缺點：
-
a標(biāo)簽只能做get請求，所以url有長度限制
-
無法獲取下載進度
-
跨域限制
-
無法在header中攜帶token做鑒權(quán)操作
-
無法判斷接口是否成功
-
IE兼容問題
二、window.open下載
<body> <button onclick="download('http://www.xxx.com/download?name=file.pdf')">window.open下載</button> <script> function download(url) { window.open(url, '_self'); /** * _blank：在新窗口顯示目標(biāo)網(wǎng)頁 * _self：在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁 * _top：框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁 /** } </script> </body>
優(yōu)點：
-
簡單方便
缺點：
-
會出現(xiàn)URL長度限制問題
-
需要注意url編碼問題
-
無法獲取下載進度
-
無法在header中攜帶token做鑒權(quán)操作
-
無法判斷接口是否成功
-
無法直接下載瀏覽器可直接預(yù)覽的文件類型（txt、png、pdf會直接預(yù)覽）
三、location.href 下載
<body> <button onclick="download('http://www.xxx.com/download?name=file.pdf')">location.href下載 </button> <script> function download(url) { window.location.href = url; } </script> </body>
優(yōu)點
-
簡單方便直接
-
可以下載大文件(G以上)
缺點
-
會出現(xiàn)URL長度限制問題
-
需要注意url編碼問題
-
無法獲取下載進度
-
無法在header中攜帶token做鑒權(quán)操作
-
無法直接下載瀏覽器可直接預(yù)覽的文件類型（txt、png、pdf會直接預(yù)覽）
-
無法判斷接口是否返回成功
三、文件流轉(zhuǎn)blob對象下載
<button onclick="download()">文件流轉(zhuǎn)blob對象下載</button> <script> download() { axios({ url: 'http://www.xxx.com/download', method: 'get', responseType: 'blob', }).then(res => { const fileName = res.headers.content-disposition.split(';')[1].split('filename=')[1]; const filestream = res.data; // 返回的文件流 // {type: 'application/vnd.ms-excel'}指定對應(yīng)文件類型為.XLS (.XLS的縮寫就為application/vnd.ms-excel) const blob = new Blob([filestream], {type: 'application/vnd.ms-excel'}); const a = document.createElement('a'); const href = window.URL.createObjectURL(blob); // 創(chuàng)建下載連接 a.href = href; a.download = decodeURL(fileName ); document.body.appendChild(a); a.click(); document.body.removeChild(a); // 下載完移除元素 window.URL.revokeObjectURL(href); // 釋放掉blob對象 }) } </script>
優(yōu)點：
-
可以下載txt、png、pdf等類型文件
-
可以在header中攜帶token做鑒權(quán)操作
-
可以獲取文件下載進度
-
可以判斷接口是否返回成功
缺點：
-
兼容性問題，IE10以下不可用，注意Safari瀏覽器,官網(wǎng)給出 Safari has a serious issue with blobs that are of the type application/octet-stream
-
將后端返回的文件流全部獲取后才會下載
推薦學(xué)習(xí)：《JavaScript視頻教程》
