download使用淺析

先來介紹一下咱們的主角download讓咱們有一個簡單認識,圖中咱們能夠看到a標籤的download屬性，他是用來指定能夠下載，值是filename。圖片來源

再來講說場景，網頁上要下載東西，下載一個資源（軟件.exe 、 壓縮包.zip 、 圖片.png 、 本文.txt ），咱們經過url打開，發現有的能夠下載，有的直接顯示了，這就有點尷尬了。先說說爲何有的資源就直接顯示了。這是由於瀏覽器發現他能夠本身打開了，因此他就以爲他要顯示好比你的 .png .txt .html。那若是咱們要下載怎麼辦？

這種東西呢，通常就兩個辦法，一個前端控制，一個後端控制。

後端控制 新給你一個url，加個下載頭。瀏覽器一看，哎呦這個東西是要下載的，不須要打開，他就直接下載了。這樣的下載須要後端人員配合，這咔咔咔就改代碼。

前端控制 a標籤的Download屬性，加上之後，就是下載資源，這個好，想下載什麼下載什麼，可是呢，這種好用的東西在前端通常都有問題，什麼問題？兼容問題唄，FF不支持跨域下載，非跨域下是能夠下載的-測試地址。跨域狀況，chrome裏面設置filename很差使-測試地址同上。固然，還有咱們要兼容的ie。

//這樣寫成一個function可讓咱們不用界面上放一個a標籤，換成js觸發。
a = document.createElement('a');
a.download = filename;
a.href = 'https://segmentfault.com';
// 觸發點擊
document.body.appendChild(a);
a.click();
document.body.removeChild(a);