layui导出Excel功能的两种方式的尝试

第一种方式
利用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

截图：

不能泄露信息，海涵！

layui导出Excel功能的两种方式的尝试相关推荐

plsql导出表结构到excel_plsql 将表结构导出到excel中的两种方式
1.情景展示如何将表结构导出到excel中(不是建表的SQL语句),如何实现? 2.方式一新建一个SQL窗口,输入要导出结构的表,选中右键-->描述右键-->导出-->CSV文 ...
java excel生成_两种方式实现java生成Excel
Web应用中难免会遇到需要将数据导出并生成excel文件的需求.同样,对于本博客中的总结,也是建立在为了完成这样的一个需求,才开始去了解其实现形式,并且顺利完成需求的开发,先将实现过程总结于此.本博文 ...
php 导出excel (html),php两种导出excel的方法
所需要的:jquery库,phpexcel插件,页面导出excel效果测试文件explode.php,excel导出功能实现文件exp.php和explode_excel.php,文件相关内容在此文下 ...
java操作excel常用的两种方式
转载自:https://www.cnblogs.com/wangyang108/p/6030420.html Excel是我们平时工作中比较常用的用于存储二维表数据的,JAVA也可以直接对Excel进 ...
.NET CORE 2.1 导出excel文件的两种方法
最近在做 MVC 项目的时候遇到项目的导出,下面总结下两种导出到excel 的方法第一种方法: 将文件写到本地,然后返回这个File 或者返回这个 File 的绝对地址其中 _hostingE ...
导出Excel功能的3种实现
项目中总会用到Excel的导出功能,接触过好几个项目,发现有个项目的导出实现特别值得学习.这里学习顺带总结一下. 一.三种方法我遇到的导出目前有3种处理: 每个功能一个导出方法: 写一个通用的Exp ...
php 导入导出Excel 实现翻译两种不同的Excel文件（xlsx文件和csv文件）
需要注意的是申请百度翻译的APPID 和密钥时,我申请的是标准服务,所以每秒只能调用一次,就必须休眠一秒,不然会报54003,所以翻译大量数据列时调用就比较慢,想要快一些可以申请时选择另外两种申请服 ...
VUE实现点击头像出现遮罩层的功能的两种方式
本文是为了解决点击头像,出现一个遮罩层,显示上传头像.先说一下思路,第一种是用动画的方式来移动位置,但是ie9不支持动画,ie8一下直接不支持位置移动.所以某就研究了第二种方式,就是利用相对位置的固定 ...
php原生导出excel文件的两种方法
第一种方法: $filename='文件名称';$filetitle='你的标题';if($_POST){set_time_limit(10000):$title = '';ini_set('memo ...

layui导出Excel功能的两种方式的尝试

layui导出Excel功能的两种方式的尝试相关推荐

最新文章

热门文章