借助HTML5 Blob實現文本信息文件下載

原理其實很簡單，我們可以將文本或者JS字符串信息借助Blob轉換成二進制，然后，作為<a>元素的href屬性，配合download屬性，實現下載。

代碼也比較簡單，如下示意（兼容Chrome和Firefox）：

 

var funDownload = function (content, filename) {
    // 創建隱藏的可下載鏈接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符內容轉變成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};

　　其中，content指需要下載的文本或字符串內容，filename指下載到系統中的文件名稱。

funDownload(textarea.value, 'test.html');	

不止是.html文件，.txt, .json等只要內容是文本的文件，都是可以利用這種小技巧實現下載的。

在Chrome瀏覽器下，模擬點擊創建的<a>元素即使不append到頁面中，也是可以觸發下載的，但是在Firefox瀏覽器中卻不行，因此，上面的funDownload()方法有一個appendChild和removeChild的處理，就是為了兼容Firefox瀏覽器。

download屬性從Edge13開始支持，理論上，edge也應該支持直接JS觸發的瀏覽器文件下載