稚久|从图片裁剪来聊聊前端二进制
最开始的一个小需求前两天项目中有个小需求：前端下载后台小哥返回的二进制流文件 。
起初接到这个需求时 ， 我感觉这很简单啊（虽然我不会 ， 但可以百度啊 ，，，， ）
然后就写出了如下的代码：
let blob = new Blob([res.data]);let fileName = `Cosen.csv`;if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, fileName);} else {let link = document.createElement("a");let evt = document.createEvent("HTMLEvents");evt.initEvent("click", false, false);link.href = http://kandian.youth.cn/index/URL.createObjectURL(blob);link.download = fileName;link.style.display ="none";document.body.appendChild(link);link.click();window.URL.revokeObjectURL(link.href);}这一段代码 ， 我大概强行解释一下：
首先判断window.navigator.msSaveOrOpenBlob是为了兼容IE（谁要兼容这 xxIE！！）
然后非IE的通过URL.createObjectURL()将Blob(Blob是啥？不知道？没关系 ， 我下面会具体讲解的)构建为一个object URL对象、指定文件名方法方法名描述abort中止读取操作readAsArrayBuffer异步按字节读取文件内容 ， 结果用 ArrayBuffer 对象表示readAsBinaryString异步按字节读取文件内容 ， 结果为文件的二进制串readAsDataURL异步读取文件内容 ， 结果用 data:url 的字符串形式表示readAsText异步按字符读取文件内容 ， 结果用字符串形式表示
事件【稚久|从图片裁剪来聊聊前端二进制】事件名描述onabort中断时触发onerror出错时触发onload文件读取成功完成时触发onloadend读取完成触发（无论成功或失败）onloadstart读取开始时触发onprogress读取中
示例下面我们尝试把一个文件的内容通过字符串的方式读取出来：
document.getElementById('upload').addEventListener('change', function (e) {var file = this.files[0];const reader = new FileReader();reader.onload = function () {const result = reader.result;console.log(result);}reader.readAsText(file);}, false);ArrayBuffer/TypedArray/DataView 对象ArrayBuffer先来看下ArrayBuffer的功能：
先来介绍ArrayBuffer ,是因为 FileReader 有个 readAsArrayBuffer()的方法,如果被读的文件是二进制数据,那用这个方法去读应该是最合适的,读出来的数据,就是一个 Arraybuffer 对象,来看下定义：
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区.ArrayBuffer 不能直接操作,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容.
ArrayBuffer也是一个构造函数 ， 可以分配一段可以存放数据的连续内存区域 。
const buffer = new ArrayBuffer(8);// ArrayBuffer 对象有实例属性 byteLength， 表示当前实例占用的内存字节长度（单位字节）console.log(buffer.byteLength);由于无法对 Arraybuffer 直接进行操作,所以我们需要借助其他对象来操作. 所以就有了 TypedArray(类型数组对象)和 DataView对象 。
DataView 对象上面代码生成了一段 8 字节的内存区域 ， 每个字节的值默认都是 0 。
为了读写这段内容 ， 需要为它指定视图 。 DataView视图的创建 ， 需要提供ArrayBuffer对象实例作为参数 。
推荐阅读
- 澳洋顺昌|今日股市概况与热点公司扫描（9/7）
- 雪佛兰|美系车里，雪佛兰和福特家用车，差距天壤之别
- 兔玩电竞|JPL职业联赛名将榜第一期，剑网3
- 贵娅说娱乐|搞笑GIF：美少女的自拍
- 鹿晗|鹿晗的人设，终于崩塌了
- 倪妮|双眼皮“割坏了”的倪妮，算什么绝世大美女啊？
- 武汉大学人民医院|泪目！武汉落日余晖照主角重逢
- 波兰队|周一欧国联：波黑VS波兰、以色列VS斯洛伐克
- 5G|小米首款“5G汽车”亮相，小米有哈不能造
- 【幸福花开新边疆】219国道旁的“脱贫事”