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

標籤：remove   ring   字元   play   and   formdata   tee   on()   一個   

概述

我對使用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);});

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