我正在參加 碼上掘金體驗活動，詳情：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讀取功能的時候，發現了上面提到的優化，想到可以通過輸入的方式，靈活獲取列表資料變數的列舉值。