標簽：文件下載，技巧
在實現點擊下載文件有多種方法:
后端設置header信息
通過后端告訴瀏覽器header信息實現下載:
header('Content-type: image/jpeg');
header("Content-Disposition: attachment; filename='download.jpg'");
局限:
- 需要后端配合.
直接跳轉到目標文件的地址
使用window.open()或者location.href或者直接使用<a>標簽將頁面跳轉到文件地址,如果文件時瀏覽器無法打開的文件類型,瀏覽器會自動下載該文件.
局限:
- 會自動打開一個新頁面,體驗不好.
- 圖片文件和文本文件這些瀏覽器能夠打開的文件無法下載.
使用表單提交的方式下載文件
實現的思路是: 在點擊之后,在頁面中通過js代碼新建一個form表單元素,然后通過提交表單的方式請求文件,如果文件類型是時瀏覽器無法打開的文件,那么就會對文件進行下載.
function download2() {
var $form = $('<form method="GET"></form>');
$form.attr('action', '/download/papers/1');
$form.appendTo($('body'));
$form.submit();
}
優點:
- 不需要開啟新的頁面即可下載文件.
局限:
- 無法下載瀏覽器能夠打開的文件.
使用a標簽的download屬性
通過在a標簽中添加download屬性,即可實現點擊下載任何文件,體驗非常的好.
局限:
- 兼容性差,在大部分瀏覽中不支持跨域資源的
download屬性下載.
使用file-saver插件實現文件下載
file-saver內部操作:
-
支持download的瀏覽器,直接使用a標簽實現下載.
-
不支持download的瀏覽器:
-
特殊瀏覽器支持FileReader的，使用其構建URL，使用window.open或location.href來實現.
-
除了特殊的瀏覽器，使用URL.createObjectURL來構建對象URL，使用window.open或location.href來實現.
使用:
handleDownload(url, name) {
this.getBlob(url).then(blob => {
saveAs(blob, name);
})
return false;
};
getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
})
};
參考文檔
張鑫旭博客關於a標簽download屬性的介紹
file-saver插件地址
作者簡介：李成文，蘆葦科技web前端開發工程師，擅長網站建設、微信公眾號開發、微信小程序開發、小游戲制作、企業微信制作、H5建設，專注於前端框架、交互設計、圖像繪制、數據分析等研究。
個人博客：LCW blog
歡迎和我們一起並肩作戰： web@talkmoney.cn
訪問 www.talkmoney.cn 了解更多
提供深圳微信公眾號制作，廣東釘釘開發，專業的企業微信外包，高性價比的微信小程序建設，靠譜的小游戲制作，高質量的H5開發