亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端利用Blob對象創(chuàng)建指定文件并下載

stonezhu / 458人閱讀

摘要：一對象對象表示一個不可變原始數(shù)據(jù)的類文件對象。示例二對象通過創(chuàng)建對象指定文件的下載鏈接。構(gòu)造函數(shù)創(chuàng)建新的表示指定的對象或者對象。屬性指定下載鏈接屬性指定文件名屬性規(guī)定被下載的超鏈接目標(biāo)。

一、Blob對象

Blob對象表示一個不可變、原始數(shù)據(jù)的類文件對象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File接口基于Blob，繼承了blob的功能并將其擴展使其支持用戶系統(tǒng)上的文件。

構(gòu)造函數(shù) 
var aBlob = new Blob( array, options );

array 是一個由ArrayBuffer（二進制數(shù)據(jù)緩沖區(qū)）、ArrayBufferView（二進制數(shù)據(jù)緩沖區(qū)的array-like視圖）、Blob、DOMString等對象構(gòu)成的Array，或者其他類似對象的混合體，它將會被放進Blob。DOMStrings會被編碼為UTF-8。

options 是可選的，它可能會指定如下兩個屬性：

type，默認(rèn)值為 ""，它代表了將會被放入到blob中的數(shù)組內(nèi)容的MIME類型。

endings，默認(rèn)值為"transparent"，用于指定包含行結(jié)束符n的字符串如何被寫入。 它是以下兩個值中的一個： "native"，代表行結(jié)束符會被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符，或者 "transparent"，代表會保持blob中保存的結(jié)束符不變。

示例 
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : "application/json"});
二、URL對象

通過創(chuàng)建URL對象指定文件的下載鏈接。

構(gòu)造函數(shù)

創(chuàng)建新的URL表示指定的File對象或者Blob對象。

objectURL = window.URL.createObjectURL(blob);
window.URL.revokeObjectURL()

在每次調(diào)用createObjectURL()方法時，都會創(chuàng)建一個新的 URL 對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當(dāng)不再需要這些 URL 對象時，每個對象必須通過調(diào)用 URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時機主動釋放掉它們。

window.URL.revokeObjectURL(objectURL);
三、利用標(biāo)簽下載

生成一個標(biāo)簽。

const link = document.createElement("a");
href屬性指定下載鏈接 
link.href = window.URL.createObjectURL(blob);
dowload屬性指定文件名

download 屬性規(guī)定被下載的超鏈接目標(biāo)。在標(biāo)簽中必須設(shè)置 href 屬性。該屬性也可以設(shè)置一個值來規(guī)定下載文件的名稱。所允許的值沒有限制，瀏覽器將自動檢測正確的文件擴展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

link.download = fileName;
click()事件觸發(fā)下載 
link.click();
四、格式轉(zhuǎn)換

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 參考手冊設(shè)置type即可。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95250.html

相關(guān)文章

  • 細(xì)說Web API中的Blob

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

    Cheng_Gang 評論0 收藏0

  • 細(xì)說Web API中的Blob

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

    layman 評論0 收藏0

  • 前端js實現(xiàn)字符串/圖片/excel文件下載

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

    DevWiki 評論0 收藏0

  • 前端js實現(xiàn)字符串/圖片/excel文件下載

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

    ingood 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<