成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

stonezhu / 379人閱讀

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

一、Blob對(duì)象

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

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

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

options 是可選的，它可能會(huì)指定如下兩個(gè)屬性：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);

注 ：下載指定擴(kuò)展名的文件只需要對(duì)照MIME 參考手冊(cè)設(shè)置type即可。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95250.html

相關(guān)文章

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

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

    Cheng_Gang 評(píng)論0 收藏0

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

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

    layman 評(píng)論0 收藏0

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

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

    DevWiki 評(píng)論0 收藏0

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

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

    ingood 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<