JS 實現觸發下載內容(H5 download)

概述

我對使用js控制下載非常感興趣，在網上查資料的時候碰巧看到了相關實現方法，記錄下來供以后開發時參考，相信對其他人也有用。

參考資料：

JS前端創建html或json文件並瀏覽器導出下載

理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型

實現方法

一種實現方法是利用H5中的download屬性。如果給a標簽加了這個屬性的話，點擊a標簽不會跳到鏈接或者打開圖片，而是會直接下載資源。示例如下：

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

注意：這個屬性的兼容性很差，貌似不兼容safara，並且僅適用於同源URL。

於是我們的實現方法是，在用戶點擊的時候，給html添加一個擁有href和download屬性的a標簽，然后用js對a標簽進行點擊，然后就可以自動下載了。相關代碼如下：

var link = document.createElement('a');
//設置下載的文件名
link.download = filename;
link.style.display = 'none';
//設置下載路徑
link.href = src;
//觸發點擊
document.body.appendChild(link);
link.click();
//移除節點
document.body.removeChild(link);

然后怎么來獲得這個下載路徑src呢？下面介紹2種方法。

利用canvas轉base64下載圖片

我們都知道，利用canvas可以把畫布轉化為一個base64的圖片，這個base64代碼就是圖片源。示例如下：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
//這里在canvas上面進行一些操作

//這里導出src，然后把這里的src賦給上面的src即可
var src = context.toDataURL('image/jpeg');

利用Blob對象下載文本

我們可以把文本用Blob對象轉化為二進制，然后利用上面的方法下載。示例如下：

//content是文本或字符串內容
var blob = new Blob([content]);

//這里導出src，然后把這里的src賦給上面的src即可
var src = URL.createObjectURL(blob);

對於創建blob對象，有下面幾個示例：

//創建字符串對象
var blob1 = new Blob([JSON.stringify(obj)]);

//創建一個DOMString對象
var s = '<div>Hello World!!</div>'
var blob2 = new Blob([s], {type: 'text/xml'});

//創建一個ArrayBuffer對象
var abf = new ArrayBuffer(8);
var blob3 = new Blob([abf], {type: 'text/plain'});

另外canvas有一個toBlob的api，使用示例如下：

var canvas = document.getElementById('canvas');

canvas.toBlob(function(blob) {
  var newImg = document.createElement('img'),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});