JS前端下載文本文件小技巧：1、download屬性；2、借助Blob轉換成二進制下載

一、HTML download 與文件下載

　　如果希望在前端側直接觸發某些資源的下載，最方便快捷的方法就是使用HTML5原生的download屬性，例如：

<a href="large.jpg" download>下載</a>

　　但顯然，如果純粹利用HTML屬性來實現文件的下載（而不是瀏覽器打開或瀏覽），對於動態內容，就無能為力。

　　例如，我們對頁面進行分享的時候，希望分享圖片是頁面內容的實時截圖，此時，這個圖片就是動態的，純HTML顯然是無法滿足我們的需求的，借助JS和其它一些HTML5特性，例如，將頁面元素轉換到canvas上，然后再轉成圖片進行下載。

　　是否支持download屬性的監測：要監測當前瀏覽器是否支持download屬性，一行JS代碼就可以了，如下：

var isSupportDownload = 'download' in document.createElement('a');

二、借助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指下載到系統中的文件名稱。

　　觸發下載的JS代碼就幾行：

button.addEventListener('click', function () { funDownload(textarea.value, 'test.html'); });

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

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

　　實例：

var eleTextarea = document.querySelector('textarea'); var eleButton = document.querySelector('input[type="button"]'); // 下載文件方法
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); }; if ('download' in document.createElement('a')) { // 作為test.html文件下載
    eleButton.addEventListener('click', function () { funDownload(eleTextarea.value, 'test.html'); }); } else { eleButton.onclick = function () { alert('瀏覽器不支持'); }; }

總結：

1、download屬性下載文件：download="文件路徑"

2、Blob二進制轉換：new Blob([content])，以及二進制路徑轉換：URL.createObjectURL(new Blob([content]))