前端利用Blob對象創建指定文件并下載

stonezhu 發布于2019-08-22 17:31 / 368人閱讀

摘要：一對象對象表示一個不可變原始數據的類文件對象。示例二對象通過創建對象指定文件的下載鏈接。構造函數創建新的表示指定的對象或者對象。屬性指定下載鏈接屬性指定文件名屬性規定被下載的超鏈接目標。

一、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"，用于指定包含行結束符n的字符串如何被寫入。它是以下兩個值中的一個： "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);

三、利用標簽下載

生成一個標簽。

const link = document.createElement("a");

href屬性指定下載鏈接

link.href = window.URL.createObjectURL(blob);

dowload屬性指定文件名

download 屬性規定被下載的超鏈接目標。在標簽中必須設置 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即可。

云服務器 GPU云服務器讀取服務器文件并下載如何連接阿里云服務器并下載文件利用云服務器下載文件對象存儲 blob存儲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95250.html

細說Web API中的Blob

摘要：它是以下兩個值中的一個，表示行結束符會被更改為適合宿主操作系統文件系統的換行符，表示會保持中保存的結束符不變。方法對象有一個方法，返回一個新的對象，包含了源對象中指定范圍內的數據。這將會把它的屬性設為被傳入的值。在一般的Web開發中，很少會用到Blob，但Blob可以滿足一些場景下的特殊需求。Blob，Binary Large Object的縮寫，代表二進制類型的大對象。Blob的概...

Cheng_Gang 2019-08-21 17:03 評論0 收藏0
細說Web API中的Blob

摘要：它是以下兩個值中的一個，表示行結束符會被更改為適合宿主操作系統文件系統的換行符，表示會保持中保存的結束符不變。方法對象有一個方法，返回一個新的對象，包含了源對象中指定范圍內的數據。這將會把它的屬性設為被傳入的值。在一般的Web開發中，很少會用到Blob，但Blob可以滿足一些場景下的特殊需求。Blob，Binary Large Object的縮寫，代表二進制類型的大對象。Blob的概...

layman 2019-08-01 17:47 評論0 收藏0
前端js實現字符串/圖片/excel文件下載

摘要：實現并發請求實現并發請求生成并下載字符串文件首先我們需要了解一個特殊的數據格式。如果類型未知，則該值為空字符串。表示狀態的數字。一旦完成，屬性中將包含一個字符串以表示所讀取的文件內容。在web開發中，如果你想讓用戶下載或者導出一個文件，應該怎么做呢？傳統的做法是在后端存儲或者即時生成一個文件來提供下載功能，這樣的優勢是可以做權限控制、數據二次處理，但缺點是需要額外發起請求、增大服務端...

DevWiki 2019-08-23 15:11 評論0 收藏0
前端js實現字符串/圖片/excel文件下載

摘要：實現并發請求實現并發請求生成并下載字符串文件首先我們需要了解一個特殊的數據格式。如果類型未知，則該值為空字符串。表示狀態的數字。一旦完成，屬性中將包含一個字符串以表示所讀取的文件內容。在web開發中，如果你想讓用戶下載或者導出一個文件，應該怎么做呢？傳統的做法是在后端存儲或者即時生成一個文件來提供下載功能，這樣的優勢是可以做權限控制、數據二次處理，但缺點是需要額外發起請求、增大服務端...

ingood 2019-07-25 14:39 評論0 收藏0