我們先看看 download 的使用方法：

看到這里，你可能會(huì)說(shuō)，坑爹啊，這明明是用 HTML 5 的新特性來(lái)實(shí)現(xiàn)下載文件嘛，說(shuō)好的用 JavaScript 下載文件呢？

事實(shí)上，用 JavaScript 來(lái)下載文件也是利用這一特性來(lái)實(shí)現(xiàn)的，我們的 JavaScript 代碼不外乎就是：

設(shè)置它的 href 屬性

設(shè)置它的 download 屬性

用 JavaScript 來(lái)觸發(fā)這個(gè)它的 click 事件

翻譯成 JavaScript 代碼就是：

var a = document.createElement("a");
var url = window.URL.createObjectURL(blob);
var filename = "what-you-want.txt";
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);

好拉，是不是看到有個(gè)陌生的東東呢？

window.URL 里面有兩個(gè)方法：

createObjectURL 用 blob 對(duì)象來(lái)創(chuàng)建一個(gè) object URL(它是一個(gè) DOMString)，我們可以用這個(gè) object URL 來(lái)表示某個(gè) blob 對(duì)象，這個(gè) object URL 可以用在 href 和 src 之類的屬性上。

revokeObjectURL 釋放由 createObjectURL 創(chuàng)建的 object URL，當(dāng)該 object URL 不需要的時(shí)候，我們要主動(dòng)調(diào)用這個(gè)方法來(lái)獲取最佳性能和內(nèi)存使用。

那么問(wèn)題來(lái)了，blob 對(duì)象哪里來(lái)？

Blob 全稱是 Binary large object，它表示一個(gè)類文件對(duì)象，可以用它來(lái)表示一個(gè)文件。根據(jù) MDN 上面的說(shuō)法，File API 也是基于 blob 來(lái)實(shí)現(xiàn)的。

由于本文的主題是講 JavaScript 下載文件，那我們構(gòu)建 blob 的方式就是通過(guò)服務(wù)器返回的文件來(lái)創(chuàng)建 blob 拉！
而最簡(jiǎn)單的方式就是用 fetch API 了，我們可以整合上面的例子：

fetch("http://somehost/somefile.zip").then(res => res.blob().then(blob => {
    var a = document.createElement("a");
    var url = window.URL.createObjectURL(blob);
    var filename = "myfile.zip";
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
}))

很簡(jiǎn)單對(duì)吧！

你可能會(huì)問(wèn)，何必這么麻煩呢？直接寫(xiě)成下面這樣不就好了：

好拉，說(shuō)了半天，其實(shí)我們一直說(shuō)的都是：「不要用 JavaScript 下載文件拉，限制多多，又不好用，直接用 html 就好拉，簡(jiǎn)單方便又快捷」這個(gè)論調(diào)。
事實(shí)上也確實(shí)如此，但有些時(shí)候我們確實(shí)需要通過(guò) JavaScript 來(lái)做一些預(yù)處理。

有些時(shí)候，我們需要對(duì)下載做一些限制，最常見(jiàn)的就是權(quán)限校驗(yàn)了，如檢查該用戶是否有下載的權(quán)限，是否有高速下載的權(quán)限等等。這時(shí)候，我們可以利用 JavaScript 做一些預(yù)處理。如：

fetch("http://somehost/check-permission", options).then(res => {
    if (res.code === 0) {
        var a = document.createElement("a");
        var url = res.data.url;
        var filename = "myfile.zip";
        a.href = url;
        a.download = filename;
        a.click();
    } else {
        alert("You have no permission to download the file!");
    }
});

動(dòng)態(tài)生成文件然后返回給客戶端也是一個(gè)很常見(jiàn)的需求，譬如我們有時(shí)候需要做導(dǎo)出數(shù)據(jù)的功能，把數(shù)據(jù)庫(kù)中的某些數(shù)據(jù)導(dǎo)出到 Excel 中，然后再返回客戶端。
這時(shí)候我們就不能簡(jiǎn)單的指定 href 屬性，因?yàn)閷?duì)應(yīng)的 URL 并不存在。
我們只能通過(guò) JavaScript 對(duì)服務(wù)器發(fā)出一個(gè)請(qǐng)求，通知它去生成某個(gè)文件，然后把對(duì)應(yīng)的 URL 返回給客戶端。
有沒(méi)有感覺(jué)這個(gè)過(guò)程和上面「權(quán)限校驗(yàn)」一節(jié)很像？肯定拉，因?yàn)槲覀冎皇菍?duì) URL 做了一些預(yù)處理而已嘛~

由于 download 屬性是 HTML 5 的新特性，因此它不支持舊版本的瀏覽器。

HTML 5 新的 download 特性真的很好用，結(jié)合 JavaScript 的動(dòng)態(tài)能力我們可以很方便的做出復(fù)雜的下載功能~

http://scarletsky.github.io/2016/07/03/download-file-using-javascript/

https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
https://developer.mozilla.org/en-US/docs/Web/API/Blob
http://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
http://stackoverflow.com/questions/24501358/how-to-set-a-header-for-a-http-get-request-and-trigger-file-download
http://blog.bguiz.com/2014/07/03/file-download-with-http-request-header/