主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景。
js可以通过blob方法直接操作二进制数据。
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
创建Blob
var blob = new Blob( dataArr:Array, opt:{type:string})
- dataArray: 数组,包含了要添加到 Blob 对象中的数据,数据可以是任意多个 ArrayBuffer, ArrayBufferView, Blob, 或者 DOMString 对象。
- opt:对象,用于设置Blob的属性(如: MIME 类型)
1.创建一个DOMString对象的Blob对象
var a="<p>l</p>"
var b = new Blob([a],{type:"text/plain"})
复制代码
2.创建一个装满ArrayBuffer对象的Blob对象
var a=new ArrayBuffer(16)
var b = new Blob([a],{ type:"text/plain"})
复制代码
3.创建一个装满ArrayBufferView对象的Blob对象
var a=new ArrayBuffer(16)
var b = new Int16Array(a)
复制代码
通过url下载文件
- 通过createObjectURL
//axios需要添加responseType:'blob'
let blob = new Blob([], {type: "application/-excel"});
let url = (blob);
= url;
复制代码
- 通过插件file-saver
//axios需要添加responseType:'blob'
var blob = new Blob([], {type: "text/plain;charset=utf-8"});
saveAs(blob, "");
复制代码
createDownload("","download file");
function createDownload(fileName, content){
var blob = new Blob([content]);
var link = ("a");
= fileName;
= fileName;
= (blob);
("body")[0].appendChild(link);
}
复制代码
从 Blob 中提取数据
- readAsText()
readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
这个方法是异步的,也就是说,只有当执行完成后才能够查看到结果,如果直接查看是无结果的,并返回undefined
也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果
当转化完成后, readyState 这个参数就会转换 为 done 即完成态, event("loadend") 挂载的事件会被触发,并可以通过事件返回的形参得到中的 属性得到转化后的结果
// 一个文件上传的回调 <input type="file" onchange="onChange(event)">
function onChange(event) {
var file = [0];
var reader = new FileReader();
= function(event) {
// 文件里的文本会在这里被打印出来
()
};
(file,'UTF-8');
}
复制代码
- readAsDataURL()
readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。
//<input type="file" onchange="previewFile()"><br>
//<img src="" height="200" alt="Image preview...">
function previewFile() {
var preview = ('img');
var file = ('input[type=file]').files[0];
var reader = new FileReader();
("load", function () {
= ;
}, false);
if (file) {
(file);
}
}
复制代码