1、a標簽下載 —可以直接下載txt、png、pdf、exe、xlsx等類型文件

downFile = (url) => {const a = document.createElement('a');a.style.display = 'none';a.download = 'xx';a.href = url;document.body.appendChild(a);a.click(); document.body.removeChild(a);/** download: HTML5新增的屬性* url: 屬性的地址必須是非跨域的地址*/};

2、new Blob 文件流下載

//fileName : 設置下載的文件名稱//filestream: 返回的文件流const blob = new Blob([filestream], {type: 'application/vnd.ms-excel'});const a = document.createElement('a');const href = window.URL.createObjectURL(blob); // 創建下載連接a.href = href;a.download = decodeURI(fileName );document.body.appendChild(a);a.click();document.body.removeChild(a); // 下載完移除元素window.URL.revokeObjectURL(href); // 釋放掉blob對象

3、window.open下載

window.open(url, '_self'); 缺點：會出現URL長度限制問題需要注意url編碼問題無法獲取下載進度無法在header中攜帶token做鑒權操作無法判斷接口是否成功無法直接下載瀏覽器可直接預覽的文件類型（txt、png、pdf會直接預覽）

4、location.href 下載

window.location.href = url 缺點：會出現URL長度限制問題需要注意url編碼問題無法獲取下載進度無法在header中攜帶token做鑒權操作無法直接下載瀏覽器可直接預覽的文件類型（txt、png、pdf會直接預覽）無法判斷接口是否返回成功

總結

以上是生活随笔為你收集整理的1分钟了解js如何实现下载文件功能的4种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。