我正在参加 码上掘金体验活动，详情：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读取功能的时候，发现了上面提到的优化，想到可以通过输入的方式，灵活获取列表数据变量的枚举值。