JS操作二进制方法 - blob-白红宇

主要总结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="l
"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([res.data], {
   type: "application/vnd.ms-excel"});let url = window.URL.createObjectURL(blob);window.location.href = url;复制代码

通过插件file-saver

//axios需要添加responseType：'blob'var blob = new Blob([res.data], {
   type: "text/plain;charset=utf-8"});saveAs(blob, "file.txt");复制代码

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);}复制代码

从 Blob 中提取数据

readAsText()

readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)

这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined

也就是说必须要挂载实例下的 onload 或 onloadend 的方法处理转化后的结果

当转化完成后， readyState 这个参数就会转换为 done 即完成态， event("loadend") 挂载的事件会被触发，并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果

// 一个文件上传的回调 function onChange(event) {  var file = event.target.files[0];  var reader = new FileReader();  reader.onload = function(event) {    // 文件里的文本会在这里被打印出来    console.log(event.target.result)  };  reader.readAsText(file,'UTF-8');}复制代码

readAsDataURL()

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

//
//function previewFile() {  var preview = document.querySelector('img');  var file    = document.querySelector('input[type=file]').files[0];  var reader  = new FileReader();  reader.addEventListener("load", function () {    preview.src = reader.result;  }, false);  if (file) {    reader.readAsDataURL(file);  }}复制代码