js實現文件下載

一、HTML與文件下載

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

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

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

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

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

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

 

三、借助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, width, height);
    // 如果是PNG圖片，則canvas.toDataURL('image/png')
    eleLink.href = canvas.toDataURL('image/jpeg');
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};

注：
若提供的不是圖片文件而是圖片本地地址

let image = new Image();
image.src = imgUrl;

轉換地址為圖片