溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“javascript如何實現下載功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript如何實現下載功能”吧!
javascript實現下載功能的方法：1、通過a標簽實現下載；2、通過“window.open”方法實現下載；3、通過“location.href”方法實現下載；4、通過文件流轉blob對象實現下載功能。
js實現文件下載功能
一、a標簽下載
<body>
<button onClick="download()">a標簽下載</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屬性的地址必須是非跨域的地址，如果引用的是第三方的網站或者說是前后端分離的項目(調用后臺的接口)，這時download就會不起作用。
* 此時，如果是下載瀏覽器無法解析的文件，例如.exe,.xlsx..那么瀏覽器會自動下載，但是如果使用瀏覽器可以解析的文件，比如.txt,.png,.pdf....瀏覽器就會采取預覽模式
* 所以，對于.txt,.png,.pdf等的預覽功能我們就可以直接不設置download屬性(前提是后端響應頭的Content-Type: application/octet-stream，如果為application/pdf瀏覽器則會判斷文件為 pdf ，自動執行預覽的策略)
*/
fileName && a.setAttribute('download', fileName);
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
</body>
優點：
可以直接下載txt、png、pdf、exe、xlsx等類型文件
缺點：
a標簽只能做get請求，所以url有長度限制
無法獲取下載進度
跨域限制
無法在header中攜帶token做鑒權操作
無法判斷接口是否成功
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：在新窗口顯示目標網頁
* _self：在當前窗口顯示目標網頁
* _top：框架網頁中在上部窗口中顯示目標網頁
/**
}
</script>
</body>
優點：
簡單方便
缺點：
會出現URL長度限制問題
需要注意url編碼問題
無法獲取下載進度
無法在header中攜帶token做鑒權操作
無法判斷接口是否成功
無法直接下載瀏覽器可直接預覽的文件類型（txt、png、pdf會直接預覽）
三、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>
優點
簡單方便直接
可以下載大文件(G以上)
缺點
會出現URL長度限制問題
需要注意url編碼問題
無法獲取下載進度
無法在header中攜帶token做鑒權操作
無法直接下載瀏覽器可直接預覽的文件類型（txt、png、pdf會直接預覽）
無法判斷接口是否返回成功
三、文件流轉blob對象下載
<button onclick="download()">文件流轉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'}指定對應文件類型為.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); // 創建下載連接
a.href = href;
a.download = decodeURL(fileName );
document.body.appendChild(a);
a.click();
document.body.removeChild(a); // 下載完移除元素
window.URL.revokeObjectURL(href); // 釋放掉blob對象
})
}
</script>
優點：
可以下載txt、png、pdf等類型文件
可以在header中攜帶token做鑒權操作
可以獲取文件下載進度
可以判斷接口是否返回成功
缺點：
兼容性問題，IE10以下不可用，注意Safari瀏覽器,官網給出 Safari has a serious issue with blobs that are of the type application/octet-stream
將后端返回的文件流全部獲取后才會下載
到此，相信大家對“javascript如何實現下載功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
