layui导出Excel功能的两种方式的尝试
第一种方式利用layui自带的导出功能:在layui文档中有例子和代码网址:https://www.layui.com/demo/table/parseData.html只需要在前端界面加入toolbar属性和totalrow并设置为true,即可开启layui自带导出功能。优点:方便,高效,操作简单。缺点:不兼容ie浏览器,只适用高级浏览器,比如chrome。而且导出数据会存在问...
第一种方式
利用layui自带的导出功能:在layui文档中有例子和代码
网址:https://www.layui.com/demo/table/parseData.html
只需要在前端界面加入toolbar属性和totalrow并设置为true,即可开启layui自带导出功能。
优点:方便,高效,操作简单。
缺点:不兼容ie浏览器,只适用高级浏览器,比如chrome。而且导出数据会存在问题,当数据过长会以####显示,把表格单元格拉长才会显示全部信息,当一列中有以0开头的数据,导出后在表格中会自动把前面的0省略。不推荐使用,局限性较大。
第二种方式:
利用第三方扩展插件: 里面有详细的方法介绍和插件的下载
网址:https://www.baidu.com/link?url=lpGAQ3e_7zsjP4CCZBSEbaqtkk9C45lQNTbq3uDJ1GgAfDPh8IGS77iC1-5ioy1o&wd=&eqid=f0cb40be000a1025000000025cff016c
步骤:①https://fly.layui.com/extend/excel/#download下载下来插件,把layui_exts文件夹引入项目
②前端界面设置button按钮
<button type="button" lay-submit="" class="layui-btn layui-btn-warm" id="exportExcel" name="exportExcel">
<i class="layui-icon"></i>导出Excel</button>
③前端界面js代码:导入excel插件,通过ajax从后台获取json字符串,调用excel插件的filterExportData方法导出excel表格。
上代码:
layui.config({//配置并导入excel插件
base: '${base}/scripts/layui/layui_exts/'
}).use([ 'excel', 'layer'], function() {
var $ = layui.$;
var layer = layui.layer;
var excel = layui.excel;
$('#exportExcel').on('click', function(){
// 模拟从后端接口读取需要导出的数据
$.ajax({
url: '${path}/spPatTreat/queryDoctorDetailTreat.action?doctorCode='+parentData.doctorCode+'&startDate='+parentData.dtStart+'&endDate='+parentData.dtEnd
,dataType: 'json'
,success(res) {
var data = res;
console.log(res);
// 重点!!!如果后端给的数据顺序和映射关系不对,请执行梳理函数后导出
data = excel.filterExportData(data, [
'createTime'
,'deptName'
,'patCode'
,'patName'
,'sex'
,'age'
,'docRegType'
,'doctorName'
,'patDiag'
,'registerId'
,'outpatID'
]);
// 重点2!!!一般都需要加一个表头,表头的键名顺序需要与最终导出的数据一致
data.unshift({ createTime: "就诊时间", deptName: "科室",patCode: '就诊卡号', patName: "患者姓名",sex: "性别",age: '年龄', docRegType: "就诊类型",doctorName: "接诊医生",patDiag: '诊断', registerId: "挂号流水号",outpatID: "就诊号"});
var timestart = Date.now();
excel.exportExcel(data, '医生详细坐诊记录--'+parentData.doctorName+'.xlsx', 'xlsx');
// var timeend = Date.now();
// var spent = (timeend - timestart) / 1000;
// layer.alert('单纯导出耗时 '+spent+' s');
}
,error() {
layer.alert('获取数据失败,请检查是否部署在本地服务器环境下');
}
});
});
});
优点:支持 IE10+、Firefox、chrome 等主流浏览器,导出的excel内容齐全,无丢失字符,使用灵活,可以自定义字段。
缺点:不兼容ie8,想要兼容ie8的就去找poi方式吧。。。(哭廖,我研究了好久结果不兼容ie8)
这是poi方式导出excel的链接:https://blog.csdn.net/zhi258wei/article/details/91491178
截图:
不能泄露信息,海涵!
更多推荐
所有评论(0)