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

看到這里，你可能會說，坑爹啊，這明明是用 HTML 5 的新特性來實現下載文件嘛，說好的用 JavaScript 下載文件呢？

事實上，用 JavaScript 來下載文件也是利用這一特性來實現的，我們的 JavaScript 代碼不外乎就是：

設置它的 href 屬性

設置它的 download 屬性

用 JavaScript 來觸發這個它的 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);

好拉，是不是看到有個陌生的東東呢？

window.URL 里面有兩個方法：

createObjectURL 用 blob 對象來創建一個 object URL(它是一個 DOMString)，我們可以用這個 object URL 來表示某個 blob 對象，這個 object URL 可以用在 href 和 src 之類的屬性上。

revokeObjectURL 釋放由 createObjectURL 創建的 object URL，當該 object URL 不需要的時候，我們要主動調用這個方法來獲取最佳性能和內存使用。

那么問題來了，blob 對象哪里來？

Blob 全稱是 Binary large object，它表示一個類文件對象，可以用它來表示一個文件。根據 MDN 上面的說法，File API 也是基于 blob 來實現的。

由于本文的主題是講 JavaScript 下載文件，那我們構建 blob 的方式就是通過服務器返回的文件來創建 blob 拉！
而最簡單的方式就是用 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);
}))

很簡單對吧！

你可能會問，何必這么麻煩呢？直接寫成下面這樣不就好了：

好拉，說了半天，其實我們一直說的都是：「不要用 JavaScript 下載文件拉，限制多多，又不好用，直接用 html 就好拉，簡單方便又快捷」這個論調。
事實上也確實如此，但有些時候我們確實需要通過 JavaScript 來做一些預處理。

有些時候，我們需要對下載做一些限制，最常見的就是權限校驗了，如檢查該用戶是否有下載的權限，是否有高速下載的權限等等。這時候，我們可以利用 JavaScript 做一些預處理。如：

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!");
    }
});

動態生成文件然后返回給客戶端也是一個很常見的需求，譬如我們有時候需要做導出數據的功能，把數據庫中的某些數據導出到 Excel 中，然后再返回客戶端。
這時候我們就不能簡單的指定 href 屬性，因為對應的 URL 并不存在。
我們只能通過 JavaScript 對服務器發出一個請求，通知它去生成某個文件，然后把對應的 URL 返回給客戶端。
有沒有感覺這個過程和上面「權限校驗」一節很像？肯定拉，因為我們只是對 URL 做了一些預處理而已嘛~

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

HTML 5 新的 download 特性真的很好用，結合 JavaScript 的動態能力我們可以很方便的做出復雜的下載功能~

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/