純前端解析excel檔案
阿新 • • 發佈:2019-01-08
專案需要,前端解析簡單的excel檔案,查找了網上的文章資料,加上按實際需要修改,寫出來供大家參考。
專案是vue的,先安裝xlsx,這個不用多說,npm install xlsx就完事了。
然後需要在元件中引入一下。
<input @change="getUploadFile" type="file">
我專案中的這個匯入用的是原生input輸入框。簡潔明瞭。如果覺得樣式醜,可以搞個div用定位寫在同樣的位置,把input設個透明就好了。jquery的更簡單,trigger簡直不要太好用。
下面是重點,拿到匯入的檔案,然後解析。為了讓大家看的清楚,我把他們都寫在input的change事件中了。
getUploadFile (e) { //拿到所匯入檔案的名字 let fileName = e.target.files[0] //定義reader,存放檔案讀取方法 let reader = new FileReader() //啟動函式 reader.readAsBinaryString(fileName) //onload在檔案被讀取時自動觸發 reader.onload = function(e) { //workbook存放excel的所有基本資訊 let workbook = XLSX.read(e.target.result, {type: 'binary'}) //定義sheetList中存放excel表格的sheet表,就是最下方的tab let sheetList = workbook.SheetNames //存放json陣列格式的表格資料 let resultJson = [] //存放字串陣列格式的表格資料 let resultFormulae = [] sheetList.forEach(function(y) { let worksheet = workbook.Sheets[y] let json = XLSX.utils.sheet_to_json(workbook.Sheets[y]) let formulae = XLSX.utils.sheet_to_formulae(workbook.Sheets[y]) if(json.length > 0){ //具體如何處理看專案需求,我的專案其實只有一個sheet,在這裡寫成迴圈避免大家誤會 //資料處理與存放 resultJson.push(json) resultFormulae.push(formulae) } }); //因為我的表格只有一列,因此我取出resultJson第一組資料的key作為鍵去遍歷取出手機號碼 let tableHeader = Object.keys(result[0])[0] let importInfo = result.map((item) => { return item[tableHeader] }) }; }
貼出幾個關鍵資料:
從上到下依次為:
console.log(resultJson)
console.log(resultFormulae)
console.log(tableHeader)
console.log(importInfo)
無論小夥伴們用的是什麼庫和框架,所依賴的js庫都是xlsx.js,有的需要直接引入js,有的需要需要像我這樣安裝依賴包,所以我這裡主要展示的是xlsx這個庫的使用方法,至於如何引入因專案而宜了。