作者：李成文；
標(biāo)簽：文件下載，技巧
在實(shí)現(xiàn)點(diǎn)擊下載文件有多種方法:
后端設(shè)置header信息
通過(guò)后端告訴瀏覽器header信息實(shí)現(xiàn)下載:
header('Content-type: image/jpeg');
header("Content-Disposition: attachment; filename='download.jpg'");
局限:
- 需要后端配合.
直接跳轉(zhuǎn)到目標(biāo)文件的地址
使用window.open()或者location.href或者直接使用<a>標(biāo)簽將頁(yè)面跳轉(zhuǎn)到文件地址,如果文件時(shí)瀏覽器無(wú)法打開(kāi)的文件類(lèi)型,瀏覽器會(huì)自動(dòng)下載該文件.
局限:
- 會(huì)自動(dòng)打開(kāi)一個(gè)新頁(yè)面,體驗(yàn)不好.
- 圖片文件和文本文件這些瀏覽器能夠打開(kāi)的文件無(wú)法下載.
使用表單提交的方式下載文件
實(shí)現(xiàn)的思路是: 在點(diǎn)擊之后,在頁(yè)面中通過(guò)js代碼新建一個(gè)form表單元素,然后通過(guò)提交表單的方式請(qǐng)求文件,如果文件類(lèi)型是時(shí)瀏覽器無(wú)法打開(kāi)的文件,那么就會(huì)對(duì)文件進(jìn)行下載.
function download2() {
var $form = $('<form method="GET"></form>');
$form.attr('action', '/download/papers/1');
$form.appendTo($('body'));
$form.submit();
}
優(yōu)點(diǎn):
- 不需要開(kāi)啟新的頁(yè)面即可下載文件.
局限:
- 無(wú)法下載瀏覽器能夠打開(kāi)的文件.
使用a標(biāo)簽的download屬性
通過(guò)在a標(biāo)簽中添加download屬性,即可實(shí)現(xiàn)點(diǎn)擊下載任何文件,體驗(yàn)非常的好.
局限:
- 兼容性差,在大部分瀏覽中不支持跨域資源的
download屬性下載.
使用file-saver插件實(shí)現(xiàn)文件下載
file-saver內(nèi)部操作:
支持download的瀏覽器,直接使用a標(biāo)簽實(shí)現(xiàn)下載.
-
不支持download的瀏覽器:
- 特殊瀏覽器支持FileReader的，使用其構(gòu)建URL，使用window.open或location.href來(lái)實(shí)現(xiàn).
- 除了特殊的瀏覽器，使用URL.createObjectURL來(lái)構(gòu)建對(duì)象URL，使用window.open或location.href來(lái)實(shí)現(xiàn).
使用:
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();
})
};
