前端利用Blob物件建立指定檔案並下載

joriewong發表於2019-03-04
前端物件

一、Blob物件

Blob物件表示一個不可變、原始資料的類檔案物件。Blob 表示的不一定是JavaScript原生格式的資料。File介面基於Blob，繼承了blob的功能並將其擴充套件使其支援使用者系統上的檔案。

建構函式

var aBlob = new Blob( array, options );
複製程式碼
  • array 是一個由ArrayBuffer（二進位制資料緩衝區）、ArrayBufferView（二進位制資料緩衝區的array-like檢視）、Blob、DOMString等物件構成的Array，或者其他類似物件的混合體，它將會被放進Blob。DOMStrings會被編碼為UTF-8。
  • options 是可選的，它可能會指定如下兩個屬性：
    • type，預設值為 “”，它代表了將會被放入到blob中的陣列內容的MIME型別。
    • endings，預設值為”transparent”，用於指定包含行結束符
      的字串如何被寫入。 它是以下兩個值中的一個： “native”，代表行結束符會被更改為適合宿主作業系統檔案系統的換行符，或者 “transparent”，代表會保持blob中儲存的結束符不變。

示例

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : `application/json`});
複製程式碼

二、URL物件

通過建立URL物件指定檔案的下載連結。

建構函式

建立新的URL表示指定的File物件或者Blob物件。

objectURL = window.URL.createObjectURL(blob);
複製程式碼

window.URL.revokeObjectURL()

在每次呼叫createObjectURL()方法時，都會建立一個新的 URL 物件，即使你已經用相同的物件作為引數建立過。當不再需要這些 URL 物件時，每個物件必須通過呼叫 URL.revokeObjectURL()方法來釋放。瀏覽器會在文件退出的時候自動釋放它們，但是為了獲得最佳效能和記憶體使用狀況，你應該在安全的時機主動釋放掉它們。

window.URL.revokeObjectURL(objectURL);
複製程式碼

三、利用<a>標籤下載

生成一個<a>標籤。

const link = document.createElement(`a`);
複製程式碼

href屬性指定下載連結

link.href = window.URL.createObjectURL(blob);
複製程式碼

dowload屬性指定檔名

download 屬性規定被下載的超連結目標。在<a>標籤中必須設定 href 屬性。該屬性也可以設定一個值來規定下載檔案的名稱。所允許的值沒有限制，瀏覽器將自動檢測正確的副檔名並新增到檔案 (.img, .pdf, .txt, .html, 等等)。

link.download = fileName;
複製程式碼

click()事件觸發下載

link.click();
複製程式碼

四、格式轉換

MIME型別使用text/plain，用.txt檔案的格式編碼去下載doc(docx)檔案（doc(docx)檔案每次開啟需要選擇合適的編碼，暫未找到解決方案，歡迎補充）。

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${new Date().valueOf()}.doc`;
const link = document.createElement(`a`);
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
複製程式碼

注 ：下載指定副檔名的檔案只需要對照MIME 參考手冊設定type即可。

相關文章