前端解析Excel文件js-xlsx與bootstrapTable

• • 1.引入xlsx.js
  • 2.上傳Excel按鈕
  • 3.讀取Excel文件
  • 4.結果

1.引入xlsx.js

<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>

2.上傳Excel按鈕

<input type="button" value="上傳Excel" onclick="$('#fileOne').click()" class="btn btn-primary" style="margin-right: -3px;"> <input type="text" id="showFileNameByExcel" disabled="disabled" readonly style="border: none; background-color: #F5F5F5;"> <input type="file" id="fileOne" name="fileOne" onchange="getFileNameByExcel(this.files)" class="form-input" style="display: none;margin-left: 15px"accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/> <button class="pull-left" type="button" class="btn btn-info" style="display: inline-block;margin-left: -35px" onclick="destroy();">重置</button>

上傳Excel按鈕

3.讀取Excel文件

var excel = [];function getFileNameByExcel(files) {excel = [];//table銷毀，否則會保留上次加載的內容$('#exampleTable').bootstrapTable('destroy');//處理文件名稱，防止文件名過長var name = $("#fileOne").val().split("\\");name = name[name.length - 1];if (strlen(name) > 15) {name = name.substring(0,8)+"..."+name.split(".")[1]$("#showFileNameByExcel").val(name);} else {$("#showFileNameByExcel").val(name);}if (files.length) {var file = files[0];var reader = new FileReader();//讀取Excel文件reader.onload = function (e) {var data = e.target.result;var workbook = XLSX.read(data, {type: 'binary'});var worksheet = workbook.Sheets[workbook.SheetNames[0]];jsonData = XLSX.utils.sheet_to_json(worksheet);tempNo = jsonData[1].__EMPTY;jsonData.splice(0, 3);$.each(jsonData, function (name, value) {var excelInfo = {};excelInfo["realname"] = value.結傭模板;excelInfo["idCard"] = value.__EMPTY;excelInfo["openBank"] = value.__EMPTY_1;excelInfo["bankAccount"] = value.__EMPTY_2;excelInfo["phone"] = value.__EMPTY_3;excelInfo["settleAmount"] = value.__EMPTY_4;excelInfo["packageAmount"] = value.__EMPTY_5;excel.push(excelInfo);});json();};reader.readAsBinaryString(file);} }//將讀取的ExcelJson顯示到表格 function json() {$('#exampleTable').bootstrapTable({data: excel,columns: [{field: 'no',align: 'center',title: '序號',formatter: function (value, row, index) {return index + 1;}}, {field: 'realname',align: 'center',title: '收款人姓名',}, {field: 'idCard',align: 'center',title: '收款人身份證',}, {field: 'openBank',align: 'center',title: '開戶行',}, {field: 'bankAccount',align: 'center',title: '銀行賬號',}, {field: 'settleAmount',align: 'center',title: '結算金額',},{field: 'packageAmount',align: 'center',title: '含服務費金額',},]}); }//獲取文件名稱長度,對漢字與字母數字處理 function strlen(str) {var len = 0;for (var i = 0; i < str.length; i++) {var c = str.charCodeAt(i);if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {len++;} else {len += 2;}}return len; }/***重置excel**/ function uploadExcel() {var fileOne = document.getElementById("fileOne");fileOne.outerHTML = fileOne.outerHTML;$('#showFileNameByExcel').val("");$('#exampleTable').bootstrapTable('destroy'); }

4.結果

總結

以上是生活随笔為你收集整理的前端解析Excel文件js-xlsx与bootstrapTable的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。