【码上掘金】通过FileReader读取Excel文件内容

语言: CN / TW / HK

我正在参加 码上掘金体验活动,详情: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文件内容

7fa2dc54d9fa40b1b40b30f226c211a3_tplv-k3u1fbpfcp-watermark.png

总结

虽然有时候第一遍做功能不够完美,但是灵感妙就妙在,雁过也,风吹去,它就来到了我的脑海。当我用掘金的码上掘金实现Excel读取功能的时候,发现了上面提到的优化,想到可以通过输入的方式,灵活获取列表数据变量的枚举值。