標簽：文件下載，技巧

在實現點擊下載文件有多種方法:

後端設置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

歡迎和我們一起並肩作戰： [email protected]
訪問 www.talkmoney.cn 了解更多

提供深圳微信公眾號制作，廣東釘釘開發，專業的企業微信外包，高性價比的微信小程序建設，靠譜的小遊戲制作，高質量的H5開發

實現點擊下載文件的幾種方法