excel文件的導入功能（解析成json數據） · 小裕的前端blog

在寫后臺管理系統中。我們往往需要實現做數據的導入導出功能。這次先寫導入的功能部分，導出功能暫時先不寫。 #### 示例一：是基于vue的前端UI框架iview寫的。具體代碼如下所示。 ~~~ <style lang="less"> .info-btn { position: relative; width: 44px; height: 24px; z-index: 1; .input-page { position: absolute; left: 0; top: 0; width: 44px; height: 24px; border-color: #57c5f7; outline: none; background-color: transparent; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; font-size: 8px; // display: none; color: #fff; z-index: 99; } .info-font { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; line-height: 24px; z-index:2; } } </style> // 隱藏了導入文件的按鈕。使用自定義的按鈕 <Button type="info" @change="importf()" class="info-btn"> <input type="file" @change="importf()" class="input-page" /> <span class="info-font">導入</span> </Button> ~~~ 為了容易區別，我把js的代碼提取出來 ~~~ data: { rABS: false } // 具體方法 importf () {//導入 let that =this; let file = event.target.files; if (!file) { return; } var f = file[0]; { var reader = new FileReader(); var name = f.name; reader.onload = function (e) { var data = e.target.result; var wb; if (that.rABS) { wb = XLSX.read(data, { type: 'binary' }); } else { var arr = that.fixdata(data); wb = XLSX.read(btoa(arr), { type: 'base64' }); } // 打印出excel文件轉成普通的json數據 console.log(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]))) }; if (that.rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f); } }, fixdata (data) { var o = "", l = 0, w = 10240; for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))); o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); return o; } ~~~ 示例二：純原生js寫的導入功能 [轉載于純原生的js實現excel文件的導入功能](https://www.jianshu.com/p/044c183edf42) ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script> </head> <body> <input type="file" onchange="importf(this)" /> <div id="demo"></div> <script> var rABS = false; //導入功能 function importf(obj) { if (!obj.files) { return; } var f = obj.files[0]; { var reader = new FileReader(); var name = f.name; reader.onload = function (e) { var data = e.target.result; var wb; if (rABS) { wb = XLSX.read(data, { type: 'binary' }); } else { var arr = fixdata(data); wb = XLSX.read(btoa(arr), { type: 'base64' }); } document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])); }; if (rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f); } } function fixdata(data) { var o = "", l = 0, w = 10240; for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))); o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); return o; } </script> </body> </html>