前端解析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相关推荐

js前端解析excel文件
使用纯Javascript解析excel文件. 使用的是开源的解析excel的js库:sheetjs.github地址:https://github.com/SheetJS/js-xlsx 首先引用J ...
JavaScript纯前端解析Excel文件
最近在开发时候遇到了这样的一个需求:需要在前端通过解析Excel将Excel中的值进行回传填入.我想在实际的开发过程中,肯定大家也会遇到这样的需求,在这介绍一个比较不错的JS工具库:js-xlsx,及 ...
vue解析excel文件(使用xlsx)
1.安装xlsx依赖 npm install xlsx --save 2.创建一个js作为外部引入,命名为excel.js /* eslint-disable */ import XLSX from ...
Java解析Excel文件（.xlsx和.xls格式均适用）
简介: Excel文件的解析与读取普通的文本文件不同,就像xml文件的解析,最常用的Java4J方式也是jar包支持的, 根据apache官方文档:http://poi.apache.org/spre ...
java代码使用http请求解压zip包并解析xml_Javascript 是如何解析 Excel 文件的？
最近要做一个导入导出 Excel 的功能,上一次做这个功能的时候,还是用的 Java Apache POI,这是一个用 Java 编写的免费开源的跨平台的 Java API,能够对 Microsoft ...
前端实现excel文件的导入导出
前端实现excel文件的导入导出导入文件导出文件导入文件 html: <el-dropdown v-waves @command="handleBatchCommand" ...
读取ppt并存入数据库_Java解析Excel文件并把数据存入数据库
前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致 ...
微信小程序使用node-xlsx解析excel文件的云函数
1.右键新建node.js云函数 2.在该云函数右键:在外部终端窗口打开 3.输入npm install node-xlsx,回车 4.引入并写程序,如下 // 云函数入口文件 const cloud ...
java解析excel报错,poi解析excel文件报错
getFileMagic() only operates on streams which support mark(int) 使用 bis 解决 BufferedInputStream bis = ...

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

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

1.引入xlsx.js

2.上传Excel按钮

3.读取Excel文件

4.结果

前端解析Excel文件js-xlsx与bootstrapTable相关推荐

最新文章

热门文章