使用JS對Excel匯入
阿新 • • 發佈：2018-12-11
最近今天都在做前端頁面對excel的匯入匯出，忙中偷閒，對此做一下總結
本篇先寫匯入Excel,匯出Excel將在下一篇給出
關於excel匯入的方法都是寫在前端js中
需要引入的js檔案
xlsx.full.min.js(js解析excel主要用到的js工具檔案)
下載地址(想在程式碼區裡貼出來的，可是太多了，而且亂碼)
下面的例子從excel讀取的資料儲存在一個Array物件中，讀取的資料以excel表格檔案的行為單位，每一行作為一個JS物件，也就是作為Array陣列的一個元素，其中，每一行的每一列都是一個屬性值(value)，物件的首個key為表格第一行第一列的內容，往後依次為__EMPTY,__EMPTY_1,__EMPTY_2… 如：
excel檔案
html例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/xlsx.full.min.js"></script> <style type="text/css"> td { height: 20px; width: 60px; } </style> </head> <body> <input type="file" onchange="importf(this)" /> <div id="demo"></div> <table width="60%" border="1" cellspacing="1" cellpadding="4"> <thead> <tr> <th colspan="4">人員資訊</th> </tr> </thead> <tbody> <tr> <td colspan="4">一、人員基本資訊</td> </tr> <tr> <td>名字</td> <td id="name"></td> <td>年齡</td> <td id="age"></td> </tr> <tr> <td>住址</td> <td id="address"></td> <td>職業</td> <td id="work"></td> </tr> <tr> <td colspan="4">二、其他資訊</td> </tr> <tr> <td>手機號</td> <td>微訊號</td> <td>QQ號</td> <td>微博</td> </tr> <tr> <td id="phone"></td> <td id="weichat"></td> <td id="qq"></td> <td id="weibo"></td> </tr> <tr> <td>備註</td> <td colspan="3" id="remarks"></td> </tr> </tbody> </table> <script> var rABS = false; //是否將檔案讀取為二進位制字串 //匯入excel方法 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' }); } //outdata是從excel中讀取的資料，此處為Array陣列型別 //注：讀取的資料以行為單位，每一行作為一個JS物件，也就是作為Array陣列的一個元素，其中，每一行的每一列都是一個屬性值(value)，物件的首個鍵(key)為表格第一行第一列的內容，往後依次為__EMPTY,__EMPTY_1,__EMPTY_2..... var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //名字 document.getElementById("name").innerHTML = outdata[1].__EMPTY; //年齡 document.getElementById("age").innerHTML = outdata[1].__EMPTY_2; //地址 document.getElementById("address").innerHTML = outdata[2].__EMPTY; //職業 document.getElementById("work").innerHTML = outdata[2].__EMPTY_2; //手機號 document.getElementById("phone").innerHTML = outdata[5].人員資料表; //微訊號 document.getElementById("weichat").innerHTML = outdata[5].__EMPTY; //QQ document.getElementById("qq").innerHTML = outdata[5].__EMPTY_1; //微博 document.getElementById("weibo").innerHTML = outdata[5].__EMPTY_2; //備註 document.getElementById("remarks").innerHTML = outdata[6].__EMPTY; console.log(outdata); }; 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>
頁面效果
