前端經過Blob實現文件下載

時間 2019-11-06

標籤前端經過 blob 實現文件下載简体版

原文原文鏈接

最近遇到一個需求，須要將頁面中的配置信息下載下來供用戶方便使用，之前這個場景的需求有時候會放到後端處理，而後給返回一個下載連接。其實並不須要這麼麻煩，這樣既增大了服務器的負載，也讓用戶產生了沒有必要的網絡請求，如今前端也是能夠直接經過Blob對象進行前端文件下載了，下面簡單記錄下相關實現前端

Blob對象簡要介紹

Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不必定是JavaScript原生格式的數據。File 接口基於Blob，繼承了 Blob 的功能並將其擴展使其支持用戶系統上的文件。web

語法

const aBlob = new Blob( array, options ); 

複製代碼

參數說明json

array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其餘相似對象的混合體，它將會被放進 Blob。DOMStrings會被編碼爲UTF-8。
options 是一個可選的BlobPropertyBag字典，它可能會指定以下兩個屬性：
- type，默認值爲 ""，它表明了將會被放入到blob中的數組內容的MIME類型。
- endings，默認值爲"transparent"，用於指定包含行結束符\n的字符串如何被寫入。它是如下兩個值中的一個： "native"，表明行結束符會被更改成適合宿主操做系統文件系統的換行符，或者 "transparent"，表明會保持blob中保存的結束符不變

示例

const debug = {hello: "world"};
const blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});

複製代碼

URL.createObjectURL() 與 URL.revokeObjectURL()介紹

URL.createObjectURL() 靜態方法會建立一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命週期和建立它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。至關於這個方法建立了一個傳入對象的內存引用地址後端

createObjectURL語法

objectURL = URL.createObjectURL(object);
複製代碼

參數說明數組

object 是用於建立 URL 的 File 對象、Blob 對象或者 MediaSource 對象。

返回值瀏覽器

一個能夠引用到指定對象的DOMString

URL.revokeObjectURL() 靜態方法用來釋放一個以前已經存在的、經過調用 URL.createObjectURL() 建立的 URL 對象。當你結束使用某個 URL 對象以後，應該經過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。安全

你能夠在 sourceopen 被處理以後的任什麼時候候調用 revokeObjectURL()。這是由於 createObjectURL() 僅僅意味着將一個媒體元素的 src 屬性關聯到一個 MediaSource 對象上去。調用revokeObjectURL() 使這個潛在的對象回到原來的地方，容許平臺在合適的時機進行垃圾收集。bash

revokeObjectURL語法

window.URL.revokeObjectURL(objectURL);
複製代碼

參數說明服務器

objectURL 是一個 DOMString，表示經過調用 URL.createObjectURL() 方法產生的 URL 對象。

內存管理網絡

在每次調用createObjectURL() 方法時，都會建立一個新的 URL 對象，即便你已經用相同的對象做爲參數建立過。當再也不須要這些 URL 對象時，每一個對象必須經過調用 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，可是爲了得到最佳性能和內存使用情況，你應該在安全的時機主動釋放掉它們。

實際運用

好比在某後臺管理中但願將用戶的幾個配置信息導入到一個json文件當中供用戶下載下來

代碼實現以下：

const config = {
  name: 'lsqy',
  password: 'yourpassword',
  ak: 'XXXXXXXXXX',
  sk: 'XXXXXXXXXX'
}

const blobContent = new Blob(
  [JSON.stringify(config, null, 2)],
  {type : 'application/json'}
);

const blobUrl = window.URL.createObjectURL(blobContent)

downloadFileByBlob(blobUrl, 'config.json')

function downloadFileByBlob(blobUrl, filename) {
  const eleLink = document.createElement('a')
  eleLink.download = filename
  eleLink.style.display = 'none'
  eleLink.href = blobUrl
  // 觸發點擊
  document.body.appendChild(eleLink)
  eleLink.click()
  // 而後移除
  document.body.removeChild(eleLink)
}


複製代碼

執行上面的代碼，咱們能夠獲得一個config.json的文件，能夠看到，其實很簡單就實現了這個場景需求，固然這裏是下載的json文件,下載其餘的文件也是同樣的道理，只是須要獲得相應文件的blob數據，再結合相應的MIME類型便可;

兼容性方面目前主流瀏覽器都已支持，ie10以及以上也支持。

另外Blob結合URL.revokeObjectURL()與URL.revokeObjectURL()還能夠用在預覽圖片、預覽PDF、視頻連接防盜等多種場景中，你們能夠發揮本身的想象力來進行實現