事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一个专门用于支持文件操作的二进制对象 ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同 Buffer:Node.js提供的一个二进制缓冲区,常用来处理I/O操作 Blob 我们首先来介绍Blob,Blob是用来支持文件操作的.简单的说:在JS中,有两个构造…

一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. FileReader.onload   处理load事件.该事件在读取操作完成时触发. FileReader.onloadstart 处理loadstart事件.该事件在读取操作开始时触发. FileReader.onloadend 处理loadend事件.该事件在读取操作结束时(要么成功,要么失败)触发…

前言: Blob.ArrayBuffer.File.fileReader.formData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚. 为了更好的理解每个名词的意义,本文先用尽量通俗的语言解释下各自的区别,大概能在宏观上区分之后,再会在其他博文中做单个解释. 这些名词里,Blob.ArrayBuffer.File可以归为一类,它们都是数据:而fileReader算是一种工具,用来读取数据:formData可以看做是一个应用数据的场景…

前言 在前端中处理文件时会经常遇到File.Blob.ArrayBuffer以及相关的处理方法或方式如FileReader.FormData等等这些名词,对于这些常见而又不常见的名词,我相信大多数人对它们都有一种熟悉的陌生人的感觉.究其原因,相关的东西接触的不够多,且每次都网上随手拈来,不求甚解.今天,我们就稍微仔细一点,去做一个探究,弄清他们是谁,能做什么,又有什么区别,争取下次再见既是"老朋友".如果,你想更深入的了解相关知识点,可以参阅w3c和MDN的解释,文后会附上相关的参考链…

1 downloadTemplate().then(res =>{ 2 3 const data = res.data 4 const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})) 5 const link = document.createElement('a') 6 l…

1.将String字符串转换成Blob对象 //将字符串 转换成 Blob 对象 var blob = new Blob(["Hello World!"], { type: 'text/plain' }); console.info(blob); console.info(blob.slice(1, 3, 'text/plain')); 2.将TypeArray  转换成 Blob 对象 //将 TypeArray 转换成 Blob 对象 var array = new Uint16A…

1.将String字符串转换成Blob对象 //将字符串 转换成 Blob 对象 var blob = new Blob(["Hello World!"], { type: 'text/plain' }); console.info(blob); console.info(blob.slice(1, 3, 'text/plain')); 2.将TypeArray  转换成 Blob 对象 //将 TypeArray 转换成 Blob 对象 var array = new Uint16A…

在网页开发中遇到这样一个问题,在使用select的时候,想让里面的文字水平居中.首先想到的是text-align:center;但是发现在Chrome浏览器下不兼容,需要使用到text-align-last:center;就可以了.代码如下: select{ width: 400px; text-align:center; text-align-last:center;/*兼容chrome*/ } </style> <select> <option value="1…

前端使用TypedArray编辑二进制 ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过FileReader转化为二进制, 然后再做编辑等, 本文提供参考: ArrayBuffer : 代表内存之中的一段二进制数据, 通过它我们可以直接创建二进制对象,然后使用相关的方法和属性. 如何使用ArrayBuffer: new ArrayBuffer(32), 从内存中申请32个字节: 把Array…

一.XMLHttpRequest 2.0的家臣们 我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位.职位兴起以及工作分工等.抛开IE6浏览器不谈,其他浏览器的Ajax实际上都是借助XMLHttpRequest实现的. 然后,好多年过去了,XMLHttpRequest带着两位家臣,DOMString和Document数据类型攻城略地,几乎一统天下. 然时代是发展的,人们群众的需求是旺盛的,HTML5犹如冉冉升起的新星开始普照大地,恩泽大众.XMLHttp…