Blob对象 ( Binary Large Object )

一个Blob对象就是一个包含有只读原始数据的类文件对象，被浏览器“视同文件”。File 接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。

Blob对象仅仅是一个可以设置MIME类型的，二进制数据的容器，真正的业务功能还需要通过FileReader、URL、Canvas等对象实现

获取Blob

通过即可获取本地文件的Blob对象

imageSelector.addEventListener('change', (event) => {
  const file = event.target.files[0];
  console.log(file instanceof Blob);//true
});

创建Blob

1.通过构造函数

var blob = new Blob(dataArray:Array, opt:{type:string});

• dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
• opt：对象，用于设置Blob对象的属性（如：MIME类型）

2.通过Blob.slice()

Blob.slice(start:number, end:number, contentType:string)

• 此方法返回一个新的Blob对象，包含了原Blob对象中指定范围内的数据

3.通过canvas.toBlob()

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
    console.log(blob);
});

读取Blod

从Blob中读取二进制内容的唯一方法是使用 FileReader。
FileReader 对象允许异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

var reader = new FileReader();
reader.addEventListener("loadend", function(e) {
   // reader.result(或e.target.result) 包含转化为类型数组的blob
});
reader.readAsArrayBuffer(blob);

为Blob创建Url用于下载文件 / 显示图片

window.URL对象将Blob对象视为一个本地文件,并可以为其生成一个Url

1. 结合a标签的download属性，可以实现点击url下载文件

createDownload("download.txt","download file");
function createDownload(fileName, content){
    var blob = new Blob([content]);
    var link = document.createElement("a");
    link.innerHTML = fileName;
    link.download = fileName;
    link.href = URL.createObjectURL(blob);
    document.getElementsByTagName("body")[0].appendChild(link);
}

2. 结合img标签的src属性,可以实现图片预览

const imageSelector = document.getElementById('imageSelector');
const imagePreview = document.getElementById('imagePreview');
imageSelector.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  imagePreview.src = url;
});

使用Blob生成xls

    
    
    


    
    

        
        
学生成绩表
        

            
            
学号
            
姓名
            
性别
            
年龄
            
成绩
        
        

            
语文
            
数学
        
        

            
1
            
张三
            
男
            
13
            
85
            
94
        
        

            
2
            
李四
            
女
            
12
            
96
            
84
        
    

    导出表格

    

查看chrome://blob-internals/，可以查看最近的Blob：

此外canvas也可以通过toDataURL的方式建立下载

imgData = canvas.toDataURL('png');
imgData = imgData.replace('image/png','image/octet-stream');
link.href = URL.createObjectURL(blob);