造輪子:
簡單使用js將excel導入到頁面。this
首先將excel另存爲csv格式(不然要使用zipjs,才能導入,而且只支持xlsx,不支持xls)編碼
csv格式分析:
規則的如:excel
1,2,3 4,5,6
是否是感受用英文逗號就能夠分離每一cell了?
年輕人,說了每個cell用英文逗號隔開,不表明每個cell裏都是純潔的啊!
若是這幾個:
每個cell,用英文逗號隔開,若是中間出現雙字節字符或空格或英文逗號,cell會加上雙引號code
1,, 4,5,6
1,"hello word",3, 4,5,6
1,",,,,,,",3, 4,5,6
分析到這裏,就知道沒有這麼簡單。不過仍是有規律的。ip
1,能夠用正則先匹配出",,,,,,"這種特殊狀況
2,把雙引號中間的英文逗號用自定義的一個分隔符替換:<|>字符串
",,,,,," "<|><|><|><|><|><|>"
3,處理完以後,再把<|>替換回去,變成英文逗號。
4,固然這裏也會有點小bug,就是excel中若是自帶了<|>自定義的分隔符呢?我沒有好辦法,手動改分隔符唄。你有好方法告訴我哦!get
下面就是帶有完整註釋的方法體了input
<input type="file" multiple> <script> var input = document.querySelector('input'); input.addEventListener('change', function() { //讀取文件列表 importExcel(this.files, function(data) { console.log(data); }); }, false); var importExcel = function(files, back) { //判斷參數類型,這裏還能夠判斷一下文件類型 if (!files instanceof FileList) { return []; } var loadIndex = 0; var textFiles = []; [].slice.call(files).forEach(function(file) { var reader = new FileReader(); reader.onload = function(e) { //e.target.result就是整個excel的內容了 textFiles.push(readCell(e.target.result)); loadIndex++; if (loadIndex == files.length) { //讀取完全部文件後返回 back(textFiles); } }; //注意,這裏用了指定編碼來讀取文件文本內容 reader.readAsText(file, 'gbk'); }); function readCell(ex) { // 去除先後空格 return ex.trim() // 獲取數據行數 .split(/\n/gm).map(function(v) { // 匹配出非單純英文字符串的內容str var str = v.match(/"[^"]+"/ig); if (str) { // 將匹配到的str中的英文逗號轉換成<|>標記符 var result = str.map(function(vv) { return vv.replace(/,/g, '<|>'); }); // 將原字符串v中的匹配到的str進行替換 str.forEach(function(vv, i) { v = v.replace(vv, result[i]); }); } // 按逗號截取每一列數據,順便去除先後空字符 v = v.split(/\s*,\s*/g) .map(function(v) { // 去除雙引號 return v.replace(/"/g, '') // 從新將標記符轉換到英文逗號 .replace(/<\|>/g, ',') }); return v }); } } </script>