Excel

虽然微软推出的Excel是一个强大的表格工具，但是世界上总有那么些人可以把一些常见的东西玩出花来就像日本老人用Excel画画一样 当然，作为一个程序员，当然还是靠程序自动来画啦 需要了解的知识 canvas html5新增加的一种html元素，平时都是把它当作画布使用，但是正因为有了操纵像素的能力 其也能用在播放视频，截图，压缩图片等操作上，当然啦，这一次，我们主要用到它的像素分析能力 getContext canvas最常用的api，获取一个用来画画的上下文，图片一般都是2d格式，所以我们通常用getContext(2d) drawImage 将图片绘制到canvas上，这样才能获取到每个点的信息 getImageData 获取到canvas的图像信息，不过返回值中的data是个被打平的一位数组 每四个值代表了一组rgba input 这里我们靠input来获取输入值 accept属性 image/*来限定只能选择图片，不过某些浏览器上因为要从国外获取mime的原因，推荐还是写成image/png,image/jpg 获取选中的图片 onchange 如果选择了图片，会触发change这个事件，我们对此监听即可，e.target为触发事件的input，我们取他的files[0]拿到图片对象 注意如果再点击选择同一图片的话，是不会触发事件的，所以每次获取之后推荐e.target.value = “”来清空掉已选择的文件 fileReader 我们获取到的图片仅仅只是个file是没办法直接转换成一个图片元素来获取宽高和放置在canvas内的，所以我们需要借助fileReader的力量 新建一个const fileReader = new FileReader() 然后在fileReader的onload回调中获取e.result作为url 那么如何开始读取？用fileReader.readAsDataURL(file)就行，之后再将这个url生成一个image就可以使用上文提到的drawImage方法了 image 和fileReader有点类似，需要const image = new Image(), image.src = url之后在onload回调中继续 exceljs 本次的导出框架，控制了每个excel格子的背景之后生成Array Buffer 开始工作 既然有了知识储备，就开始规划一下步骤吧 做一个<input type=“file” accept=“image/*”>的按钮 在其change事件中获取file file转image 新建一个canvas元素，将image绘制上去，同时控制canvas宽高和image一致 用getImageData获取每个像素信息 像素信息我们再根据图片宽高转一个二维数组 用二维数组在excel中改变对应格子的背景色 导出excel 具体实现代码在https://github.com/mizuka-wu/image2excel上 可改进的点 图片太大会崩溃 规定最大大小，因为excel只能缩放到10% 自动压缩 图片大小检测 进度条 转移到webworker上做一部分工作 想直接使用？访问我做好的demo吧

在开发需求中，经常会遇到需要和excel相关的需求，毕竟不是所有人都是程序员，很多的业务都是通过excel去进行数据的整理归类计算的，excel中提供的一系列快捷功能，统计功能也非常的实用，但是这也就造成了除了和接口打交道，前端也需要和excel打一下交道 excel 是什么 excel是微软出的一款电子表格软件，wps是国内知名的免费办公软件，以及苹果的Numbers同样都支持编辑和生成excel文件 excel 的格式 这里说的不是单纯的excel而是平时前端开发的时候所使用到的**excel类型**的文件格式，主要有 csv csv 是一种纯文本的格式，非常的简单，每一行代表一行，没一列通过,进行分割，我们只需要通过split函数就能直接分割成对应的二维数组结构 xsls/xls 区别在于 xls类型的文件我们可以通过存储网页的形式存储下来，xsls就是一个纯的二进制文件了，这一类更倾向于使用类库进行操作 读取 如果是csv，最简单的情况下，就直接使用<input type="file">,只有用fileReader读取为纯文本就行了 nodejs和browser唯一的区别就在于，node还支持直接通过steam等概念进行输入，而browser只有arrayBuffer这一种手段 在一般情况下，直接fileReader读取excel都会是二进制流，不过根据其编码规范是可以进行还原的，其中的对应关系比较负责 常用的库 库的左右就在于，他们能将excel的文件专为对应的js对象供我们操作 sheet.js 社区开源版本的xlsx.js就可以完成读取和写入的工作了， 以下是 sheet.js 的对应数据结构. 读取也狠方便 XLSX.read(buffer, { type: "buffer" }); 不过官方的文档相对还是比较难以理解的，一般日常我用另外一个库 exceljs js-xlsx 的 思想构成也是通过将二进制流转为js对象的方式方便我们操作，不过 api 方面设计的更加友好一点 最主要的两点。 中文文档 demo 易懂 读取也很容易，通过fileReader.readAsArrayBuffer 就能直接读取，如果是在node环境下，更能直接通过steam和file接口直接获取数据 // load from buffer var workbook = new Excel.Workbook(); workbook.xlsx.load(data) .then(function() { // use workbook }); 写入 原生 js 这个只适用于 js xls 2013 之前的xls模式是可以将一个html文件导出成一个.xls文件的所以我们首先定义一个html <table id="tblData"> <tr> <th>Name</th> <th>Email</th> <th>Country</th> </tr> <tr> <td>John Doe</td> <td>john@gmail.com</td> <td>USA</td> </tr> <tr> <td>Michael Addison</td> <td>michael@gmail.com</td> <td>UK</td> </tr> <tr> <td>Sam Farmer</td> <td>sam@gmail.com</td> <td>France</td> </tr> </table> 接着获取html之后导出 ...