純JS生成並下載各類文本文件或圖片

時間 2019-11-05

原文原文鏈接

本文轉載自：www.zhangxinxu.com/wordpress/?…html

1、HTML與文件下載

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

<a href="large.jpg" download>下載</a>複製代碼

具體介紹可參考我以前的文章：「瞭解HTML/HTML5中的download屬性」。json

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

例如，咱們對頁面進行分享的時候，但願分享圖片是頁面內容的實時截圖，此時，這個圖片就是動態的，純HTML顯然是沒法知足咱們的需求的，藉助JS和其它一些HTML5特性，例如，將頁面元素轉換到canvas上，而後再轉成圖片進行下載，可參見「SVG <foreignObject>簡介與截圖等應用」一文。瀏覽器

但本文要介紹的下載不是圖片的下載，而是文本信息的下載，所須要使用的HTML特性不是canvas，而是其它。bash

2、藉助HTML5 Blob實現文本信息文件下載

若是對Blob不瞭解，能夠先看看我好些年以前寫的「理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型」一文。app

原理其實很簡單，咱們能夠將文本或者JS字符串信息藉助Blob轉換成二進制，而後，做爲<a>元素的href屬性，配合download屬性，實現下載。dom

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

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

萬般言語不達意，一枚實例來走心。

您能夠狠狠地點擊這裏：基於funDownload實現的html格式文件下載demo

點擊「下載」按鈕，會把文本域中的內容所有做爲一個.html後綴文件下載下來，各流程效果以下面幾張圖：

出現下載確認框（根據瀏覽器的設置不一樣也可能直接下載），而後名稱默認就是test.html。

而後對應保存目錄就多了個相似下圖的文件：

雙擊該test.html文件能夠在瀏覽器中正常瀏覽，說明，保存信息無誤。

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

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

3、藉助Base64實現任意文件下載

對於非文本文件，也是能夠直接JS觸發下載的，例如，若是咱們想下載一張圖片，能夠把這張圖片轉換成base64格式，而後下載。

代碼示意：

var funDownload = function (domImg, filename) {
    // 建立隱藏的可下載連接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 圖片轉base64地址
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var width = domImg.naturalWidth;
    var height = domImg.naturalHeight;    context.drawImage(domImg, 0, 0);
    // 若是是PNG圖片，則canvas.toDataURL('image/png')
    eleLink.href = canvas.toDataURL('image/jpeg');
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 而後移除
    document.body.removeChild(eleLink);
};複製代碼