## Blob
**2、Blob**
Blob(Binary Large Object)對(duì)象代表了一段二進(jìn)制數(shù)據(jù),提供了一系列操作接口。比如通過(guò)new Blob()創(chuàng)建的對(duì)象就是Blob對(duì)象.又比如,在XMLHttpRequest里,如果指定responseType為blob,那么得到的返回值也是一個(gè)blob對(duì)象.
**2.1 生成Blob對(duì)象**
生成Blob對(duì)象有兩種方法:一種是使用Blob構(gòu)造函數(shù),另一種是對(duì)已有的Blob對(duì)象使用slice()方法切出一段。
**(1)Blob構(gòu)造函數(shù)**
```
var blob = new Blob(data, type)
```
Blob構(gòu)造函數(shù)接受兩個(gè)參數(shù):
參數(shù)data是一組數(shù)據(jù),所以必須是數(shù)組,即使只有一個(gè)字符串也必須用數(shù)組裝起來(lái).
參數(shù)type是對(duì)這一Blob對(duì)象的配置屬性,目前也只有一個(gè)type也就是相關(guān)的MIME需要設(shè)置 type的值:
'text/csv,charset=UTF-8' 設(shè)置為csv格式,并設(shè)置編碼為UTF-8
'text/html' 設(shè)置成html格式
注意:任何瀏覽器支持的類型都可以這么用
```
var blob = new Blob(['我是Blob'],{type: 'text/html'});
```
**2.2 屬性**
```
blob.size //Blob大?。ㄒ宰止?jié)為單位)
blob.type //Blob的MIME類型,如果是未知,則是“ ”(空字符串)
```
**2.3 slice()**
slice()返回一個(gè)新的Blob對(duì)象,包含了源Blob對(duì)象中指定范圍內(nèi)的數(shù)據(jù)。
```
blob.slice(
optional long long start,
optional long long end,
optional DOMString contentType };
```
參數(shù)說(shuō)明:
start 可選,開(kāi)始索引,可以為負(fù)數(shù),語(yǔ)法類似于數(shù)組的slice方法.默認(rèn)值為0.
end 可選,結(jié)束索引,可以為負(fù)數(shù),語(yǔ)法類似于數(shù)組的slice方法.默認(rèn)值為最后一個(gè)索引.
contentType可選 ,新的Blob對(duì)象的MIME類型,這個(gè)值將會(huì)成為新的Blob對(duì)象的type屬性的值,默認(rèn)為一個(gè)空字符串.
**2.4 Blob的使用**
使用Blob最簡(jiǎn)單的方法就是創(chuàng)建一個(gè)URL來(lái)指向Blob:
```
<a download="data.txt" id="getData">下載</a>
var data= 'Hello world!';
var blob = new Blob([data], {
type: 'text/html,charset=UTF-8'
});
window.URL = window.URL || window.webkitURL;
document.querySelector("#getData").href = URL.createObjectURL(blob);
```
上面的代碼將Blob URL賦值給a,點(diǎn)擊后提示下載文本文件data.txt,文件內(nèi)容為“Hello World”。
**2.5 URL.createObjectURL()**
```
objectURL = URL.createObjectURL(blob);
```
使用URL.createObjectURL()函數(shù)可以創(chuàng)建一個(gè)Blob URL,參數(shù)blob是用來(lái)創(chuàng)建URL的File對(duì)象或者Blob對(duì)象,返回值格式是:blob://URL。
注意:在每次調(diào)用 createObjectURL() 方法時(shí),都會(huì)創(chuàng)建一個(gè)新的 URL 對(duì)象,即使你已經(jīng)用相同的對(duì)象作為參數(shù)創(chuàng)建過(guò)。當(dāng)不再需要這些 URL 對(duì)象時(shí),每個(gè)對(duì)象必須通過(guò)調(diào)用 URL.revokeObjectURL() 方法傳入創(chuàng)建的URL為參數(shù),用來(lái)釋放它。瀏覽器會(huì)在文檔退出的時(shí)候自動(dòng)釋放它們,但是為了獲得最佳性能和內(nèi)存使用狀況,你應(yīng)該在安全的時(shí)機(jī)主動(dòng)釋放掉它們。
**2.6 亂碼問(wèn)題**
當(dāng)數(shù)據(jù)中包含漢字時(shí),導(dǎo)出的文件可能會(huì)出現(xiàn)亂碼,不過(guò)我們可以這樣解決:
```
var data = "\ufeff" + "漢字";
```
- 前言
- JavaScript簡(jiǎn)介
- 基本概念
- 語(yǔ)法
- 數(shù)據(jù)類型
- 運(yùn)算符
- 表達(dá)式
- 語(yǔ)句
- 對(duì)象
- 數(shù)組
- 函數(shù)
- 引用類型(對(duì)象)
- Object對(duì)象
- Array對(duì)象
- Date對(duì)象
- RegExp對(duì)象
- 基本包裝類型(Boolean、Number、String)
- 單體內(nèi)置對(duì)象(Global、Math)
- console對(duì)象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達(dá)式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應(yīng)用
- 客戶端存儲(chǔ)(Cookie、Storage、IndexedDB)
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測(cè)設(shè)備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向?qū)ο蟮某绦蛟O(shè)計(jì)
- 概述
- this關(guān)鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯(cuò)誤處理機(jī)制
- JavaScript開(kāi)發(fā)技巧合集
- 編程風(fēng)格
- 垃圾回收機(jī)制
