點擊下載的幾種方式（轉）

原文鏈接：https://www.jianshu.com/p/10ac5c482193

轉載地址：https://www.jianshu.com/p/10ac5c482193

只轉了前面幾種比較常用的方法，想看全部的請前往原網址查看

 

 

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

後端設置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屬性下載.

作者：廣州蘆葦科技web前端
鏈接：https://www.jianshu.com/p/10ac5c482193
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。