【码上掘金】通过FileReader读取Excel文件内容
我正在参加 码上掘金体验活动,详情:show出你的创意代码块
前言
最近,掘金上线了新功能-码上掘金,是一个为开发者提供代码在线playground的平台,带着些许兴奋准备体验一下,写了几个功能,包括纯css3动效、canvas画布、DOM操作、文件读取等。各式功能都尝试了一下,还挺有意思的。
之前写过一篇读取Excel文件内容,功能不是很复杂,但是亮点是把文件内容转换成了前端常用的数据格式。这次在原来的基础上做了一些优化,没有做特别大的改动。
FileReader
FileReader的知识点,可以看MDN官网,介绍的很详情。这里简单介绍一下用法。
介绍
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
属性和方法
FileReader 提供的方法和书挺多的,下面主要介绍一下本次读取功能用到的FileReader的属性和方法。感兴趣的可以研读一下官网的详细介绍。
FileReader.onload
处理load (en-US)事件。该事件在读取操作完成时触发。该属性可以用来获取最终的文件数据。
FileReader.readAsBinaryString()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。该方法用来将File对象格式转化为二进制文件。
Excel文件“梭哈”
代码块
http://code.juejin.cn/pen/7086098090293215269
容我感叹一下,代码块竟然可以直接在页面里渲染,赞啊。
功能介绍
偷个小懒,之前功能介绍的文章写的挺详细的,文章地址:【功能实现】读取excel文件内容
本次仅介绍一下优化部分的功能。
功能优化
因为Excel中的表头是文本格式,不适合前端直接使用,所以通过FileReader获取数据后,我将表头的文字与语义化的英文变量做成了枚举对应,之前的枚举对应关系在代码中写成了固定,但是这样每次获取Excel文件内容时,需要改动代码。
这次在使用码上掘金,我突然有了灵感,将这个功能进行了优化,把需要对应的枚举,通input输入的方式灵活获取,不必每次改代码内容。
优化部分的代码实现
```
......
/* @name 列表展示的变量名枚举 / var renameObj = {}; var renameJson = document.getElementById('renameJson'); var renameVal = ''; renameJson.onblur = function () { renameVal = renameJson.value; if (renameVal) { renameObj = eval('(' + renameVal + ')'); myFile.disabled = ''; } }; ```
最终的Excel文件内容
总结
虽然有时候第一遍做功能不够完美,但是灵感妙就妙在,雁过也,风吹去,它就来到了我的脑海。当我用掘金的码上掘金实现Excel读取功能的时候,发现了上面提到的优化,想到可以通过输入的方式,灵活获取列表数据变量的枚举值。
- await-to-js 源码分析,体验一把捕获异常的优雅
- CSS伪类的第三集,原来伪类也可组CP
- 从:is()说起,开启CSS伪类第二集
- 一组纯CSS开发的聊天背景图,帮助避免发错消息的尴尬
- 「CSS特效」我的发呆专属,反复解锁手机屏幕
- 「技术分享」以Antd为例,快速打通UI组件开发的任督二脉
- 「功能实现」我封装了一个表单组件,感觉离财富自由又近了一步
- 「经验总结」高效开发,老代码可以这样动
- 前端开发提效小技巧之业务功能篇
- 人生有忙忙碌碌,也有诗和远方 | 2022年中总结
- 【端午节】新奇体验,我用react实现网页游戏的全过程(包括规则设计)
- 【暑假记忆】消暑神器,我用CSS复刻了一个游戏机
- 突围?我愿称之为向上的攀登者
- 【孟夏之遇】望孟夏之短夜兮,萤星相伴
- 【技术学习】SVG-边学边做
- 【TS实践】自己动手丰衣足食的TS项目开发
- 【码上掘金】通过FileReader读取Excel文件内容
- 【Taro开发】四月芳菲,Taro观赏指南
- 【Node.js】青梅煮酒,聊聊zlib压缩
- 【知识点】关于iframe跨域通信