JavaScript文件:(一)Blob
前言:二进制数据
二进制数据,大家都不陌生,我们从本地或者服务器下载文件之后,获取的数据就是二进制数据;
二进制数据,在iOS开发中,是NSData/Data类型;
那么在JavaScript中呢,二进制数据就是Blob类型;
一、Blob
Blob(Binary Large Object)术语最初来自数据库,早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。
Blob 对象表示一个不可变、原始数据的类文件对象。
我个人认为,Blob对象,就是一个文件对象,通过这个对象,我们可以获取这个文件的一系列其他值,例如文件的地址、文件的Base64等;
二、生成一个Blob对象
1. 构造函数
var blob = new Blob(array[optional], options[optional]);
构造函数,接受两个参数
第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。
第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:
例如:
var blob = new Blob(["Hello World!"],{type:"text/plain"});
2. 转化
可以根据其他类型数据(File)转化成Blob类型
三、Blob对象属性
*size
:Blob对象包含的字节数。(只读)
*type
: Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。
四、Blob对象保存到本地
let blob = new Blob(['aaa, bbb']);
let fileName = 'test.text';
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// IE浏览器
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
// Non-IE (chrome, firefox etc.)
let url = window.URL.createObjectURL(blob)
var link = document.createElement("a");
link.href = url;
link.download = decodeURI(fileName);
link.click();
window.URL.revokeObjectURL(link.href);
}
结果
五、Blob对象的实例方法
1. slice
创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。
var blob1 = blob.slice([start [, end [, contentType]]]};
-
start
:可选,表示被会被拷贝进新的 Blob 的字节的起始位置。如果传入的是一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。 -
end
: 可选, end-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果传入了一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。 -
contentType
: 可选 给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
例如:
let pblob = new Blob(['aaa, bbb']);
let blob = pblob.slice(2, 7)
结果
2. stream
返回一个ReadableStream
对象,读取它将返回包含在Blob中的数据。
例如:
let stream = blob.stream()
截屏
3. text
返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的 USVString。
在JavaScript中返回时, USVString 映射到 String
例如:
blob.text().then(result => {
console.log(result, '----')
})
结果
4. arrayBuffer
返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。
例如:
blob.arrayBuffer().then(result => {
console.log(result, '----')
})
结果
六、类型转化
通过FileReader,可把Blob对象转化为其他类型(字符串,Base64,ArrayBuffer等)