关于layui导出方式，直接使用layui（版本2.4.5及以上）自带的导出方法即可：

layui官网地址：https://www.layui.com/

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui--layui-table导出Excel</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"> -->
<link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
<button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
<button class="layui-btn" data-type="parseTable" οnclick="convertToTable()">将数据转化为静态表格</button>
<button class="layui-btn" data-type="parseTableToExcel" οnclick="exportToExcel()">导出Excel</button>
</div>

<table lay-filter="parse-table-demo">
<thead>
<tr>
<th lay-data="{field:'username', width:200}">昵称</th>
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
<th lay-data="{field:'sign', minWidth: 180}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>2016-11-28</td>
<td>人生就像是一场修行 A</td>
</tr>
<tr>
<td>贤心2</td>
<td>2016-11-29</td>
<td>人生就像是一场修行 B</td>
</tr>
<tr>
<td>贤心3</td>
<td>2016-11-30</td>
<td>人生就像是一场修行 C</td>
</tr>
</tbody>
</table>
<!--直接为table绑定数据-->
<table id="table_TravelagenceCheck" lay-filter="TravelagenceCheck"></table>

<!--引用layui.js  直接从layui官网下载2.4.5版本的layui.js-->

<script src="../layui-v2.4.5/layui/layui.js"></script>
<script>
var exportBillsData=[{
'nos':1,
'CompanyId':1001,
'CompanyName':"携程",
'Sex':'男'
},{
'nos':2,
'CompanyId':1002,
'CompanyName':"携程1",
'Sex':'女'

}];
layui.use('table', function(){
var table = layui.table;

});

//1.转化为静态表格-直接为layui-table绑定数据
function convertToTable(){
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#table_TravelagenceCheck'
, height: 480
, title: "协议贡献量明细"
, page: true
, size: 'sm'
, toolbar: "协议入住明细"
, defaultToolbar: ['filter', 'print', 'exports']
, limit: 200
, limits: [200]

//直接绑定data
, data: exportBillsData

, cols: [[ //表头
{ field: 'nos', title: "序号", width: '2%', type: 'numbers', unresize: true }
, { field: 'CompanyId', title: "协议编号", width: '10%', sort: true, unresize: true }
, { field: 'CompanyName', title: "协议名称", width: '12%', sort: true, unresize: true }
, { field: 'Sex', title: "性别", width: '12%', sort: true, unresize: true }
]]
});
});
}

//导出Excel-注明:table.exportFile方法是layui-table自带的,适用于2.4.5版本，2.3.0版本的layui.js没有这个方法
function exportToExcel(){
layui.use('table', function () {
var table = layui.table;
table.exportFile(["昵称", "加入时间", "签名"],[
['贤心1','2016-11-28','人生就像是一场修行 A'],
['贤心2','2019-11-28','人生就像是一场修行 B'],
['贤心3','2016-10-28','人生就像是一场修行 C']
],'本日将到订单列表.xls');
});
}
//导出Excel1
function exportToExcel1(){
layui.use('table', function () {
var table = layui.table;
table.exportFile(["#","账号", "类型", "姓名", "房型", "房号", "状态", "成交价",
"余额", "信用金额", "预付金额", "到达", "离开", "手机", "房数", "联房",
"VIP", "房价码", "市场码", "公司", "预订号", "备注"],[
['1','F1908090001','F','jackA302','三人房有窗 浪漫','A302','R','120','400','0','0','2019-08-09 09:33','2019-08-30 12:00','1734***2827','1','-','-','BASE','上门散客','-','R1908090001','-'],
['2','F1908210008','F','jackG202','双床房海景','G202','R','501','0','0','0','2019-08-22 09:16','2019-08-30 12:00','1734***2827','1','-','-','BASE','上门散客','-','R1908210003','-'],
['3','F1908210012','F','李先生/李先生','双床房海景','-','R','501','0','0','0','2019-08-22 12:00','2019-08-23 12:00','1777***3792','1','-','-','BASE','上门散客','-','R1908210004','-'],
['4','F1908210030','F','丁小帅','大床房1.5米床 有窗','-','R','31','0','0','0','2019-08-22 12:00','2019-08-23 14:00','1861***8299','1','-','-','VipGold','中央推荐入住','-','190822021002062','【客人留言:测试结果】[使用电子代金券:第1晚30抵30] [AliAPP订单]不赠送早餐;每日房价:2019-08-22:31.00'],
['5','F1908220001','F','沙奥','单人房早餐测试','-','R','230','0','0','230','2019-08-22 12:00','2019-08-23 13:00','1317***1407','1','-','-','VipCard','中央推荐入住','银联在线支付','190822021002069','[已支付成功](银联在线支付)[Android手机订单]不赠送早餐;每日房价:2019-08-22:230.00'],
['6','F1908220002','F','焦人杰','单人房早餐测试','D203','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220001','自助机办理'],
['7','F1908220003','F','焦人杰','单人房早餐测试','D205','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220002','自助机办理'],
['8','F1908220004','F','焦人杰','单人房早餐测试','D206','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220003','自助机办理'],
['9','F1908210038','F','焦人杰','双床房海景','G208','R','0','0','0','0','2019-08-22 17:34','2019-08-23 17:34','1363***7594','1','-','-','BASE','上门散客','-','R1908210009','自助机办理'],
['10','F1908220010','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','18','☆','-','BASE','上门散客','-','R1908220004','-'],
['11','F1908220011','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上门散客','-','R1908220004','-'],
['12','F1908220012','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上门散客','-','R1908220004','-'],
['13','F1908220008','F','沙奥','8.高级套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','☆','VipCard','中央会员预定','银联在线支付','190823021002006','[已支付成功](银联在线支付)[Android手机订单][使用电子代金券:1间房第1晚30抵30]不赠送早餐;每日房价:2019-08-23:430.00'],
['14','F1908220009','F','沙奥','8.高级套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','-','VipCard','中央推荐入住','银联在线支付','190823021002007']

],'本日将到订单列表.xls');
});

}

</script>

</body>
</html>

补充说明：

 另外补充layui.js与layui.all.js：参考地址：https://blog.csdn.net/qq_38642674/article/details/88236045

layui这个框架虽然还有一些不足之处但是我觉得已经非常优秀了，对于layui.js和layui.all.js的区别，网上别人各执一词，我今天遇到个非常恶心令我难受的问题发表一下我对这两个的看法。首先我引入layui.all.js，今天调试发现layui对象的内容如下

大概只有这些模块，其中有很多常用的模块大家都熟悉的。

然后我换成layui.js，调试layui对象的内容如下

内容差不多，但是少了几个模块，多了几个我自己引入的外部模块。所以我似乎明白了很多关于这两者的区别。

首先layui.all.js，你引入这个之后，你的layui.use()将不生效，好处是你引用里面有的模块将不用用模块化的写法引入，在js文件中可以直接用layui.table这样用。

然后layui.js，你引入这个之后，你js所有的layui模块的引用都要用layui.use()来使用，不然将无法使用。

一句话就是：layui.all.js包含的模块较多，layui.js中包含的模块较少，前者包含后者的所有模块。

分析：通过以上比较看出如果想用layui-table的导出功能：

（1）直接引用layui.js (layui.js会饮用其模块中的table.js)直接导出：

方法如下：

//导出Excel
function exportToExcel(){
layui.use('table', function () {
var table = layui.table;
table.exportFile(["昵称", "加入时间", "签名"],[
['贤心1','2016-11-28','人生就像是一场修行 A'],
['贤心2','2019-11-28','人生就像是一场修行 B'],
['贤心3','2016-10-28','人生就像是一场修行 C']
],'本日将到订单列表.xls');
});
}

(2)直接引用layui.all.js

方法如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui--layui-table导出Excel</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"> -->
<link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
<button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
<button class="layui-btn" data-type="parseTable" οnclick="convertToTable()">将数据转化为静态表格</button>
<button class="layui-btn" data-type="parseTableToExcel" οnclick="exportToExcels()">导出Excel</button>
</div>

<table lay-filter="parse-table-demo">
<thead>
<tr>
<th lay-data="{field:'username', width:200}">昵称</th>
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
<th lay-data="{field:'sign', minWidth: 180}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>2016-11-28</td>
<td>人生就像是一场修行 A</td>
</tr>
<tr>
<td>贤心2</td>
<td>2016-11-29</td>
<td>人生就像是一场修行 B</td>
</tr>
<tr>
<td>贤心3</td>
<td>2016-11-30</td>
<td>人生就像是一场修行 C</td>
</tr>
</tbody>
</table>
<!--直接为table绑定数据-->
<table id="table_TravelagenceCheck" lay-filter="TravelagenceCheck">

</table>
<!-- <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> -->
<!-- <script src="../layui-v2.4.5/layui/layui.js"></script> -->
<script src="../layui-v2.4.5/layui/layui.all.js"></script>
<script>
var exportBillsData=[{
'nos':1,
'CompanyId':1001,
'CompanyName':"携程",
'Sex':'男'
},{
'nos':2,
'CompanyId':1002,
'CompanyName':"携程1",
'Sex':'女'

}];
layui.use('table', function(){
var table = layui.table;

});

//转化为静态表格
function convertToTable(){
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#table_TravelagenceCheck'
, height: 480
, title: "协议贡献量明细"
, page: true
, size: 'sm'
, toolbar: "协议入住明细"
, defaultToolbar: ['filter', 'print', 'exports']
, limit: 200
, limits: [200]

//直接绑定data
, data: exportBillsData

, cols: [[ //表头
{ field: 'nos', title: "序号", width: '2%', type: 'numbers', unresize: true }
, { field: 'CompanyId', title: "协议编号", width: '10%', sort: true, unresize: true }
, { field: 'CompanyName', title: "协议名称", width: '12%', sort: true, unresize: true }
, { field: 'Sex', title: "性别", width: '12%', sort: true, unresize: true }
]]
});
});
}

//导出Excel
function exportToExcels(){
//layui.use('table', function () {
var table = layui.table;
table.exportFile(["昵称", "加入时间", "签名"],[
['贤心1','2016-11-28','人生就像是一场修行 A'],
['贤心2','2019-11-28','人生就像是一场修行 B'],
['贤心3','2016-10-28','人生就像是一场修行 C']
],'本日将到订单列表.xls');
// });
}

</script>

</body>
</html>

总结：通过上面直接引用layui.all.js导出excel可以看出不用layui.use，直接使用table.exportFile就可以导出，

注意点：引用2.4.5版本的layui.js时,其自带的layer.js是3.1.1版本的；引用2.4.5版本的layui.all.js时，其自带的layer.js是3.1.1版本的！

引用2.4.5版本的layui.js后其自带的layer.js版本与系统中已经引入的layer.js版本，如2.2版本的layer.js后，前者的layer.js可能会覆盖掉后者引入的layer.js版本，一些效果会不同。暂时不知道layer.js 3.1.1版本的是不是覆盖2.2版本的。。。。

最后附上：js原生方式的导出：

源码如下：

<html>
<head>
<style type="text/css">
.btn_CacheExport{
display:block;
width:83px;
height:40px;
text-align: center;
position:center;
color:black;
background-color:#C0C0C0;
line-height: 26px;
border:1px solid #727373
}

</style>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>

<button download="table导出Excel-第二种方式" οnclick='tableToExcel()' id="excelOut1">导出</button>
<a οnclick='tableToExcel()' class="btn_CacheExport" id="excelOut2">导出</a><!-- download="table导出Excel-第二种方式" -->
<a download="table导出Excel-第二种方式" href="javascript:;" οnclick="tableToExcel()" id="excelOut3">导出30-300207房态报表</a>
</head>

<body>
<script>

function tableToExcel(){
//要导出的json数据
const jsonData = [
{
name:'路人甲',
phone:'123456',
email:'123@123456.com'
},
{
name:'炮灰乙',
phone:'123456',
email:'123@123456.com'
},
{
name:'土匪丙',
phone:'123456',
email:'123@123456.com'
},
{
name:'流氓丁',
phone:'123456',
email:'123@123456.com'
},
]
//列标题
let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
//循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
}
str+='</tr>';
}
//Worksheet名
let worksheet = '这是导出的Excel'
let uri = 'data:application/vnd.ms-excel;base64,';

//下载的表格模板数据
let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>${str}</table></body></html>`;

//下载导出1：使用button按钮
//window.location.href = uri + base64(template);//这种方式导出的Excel文件没有指定文件名

//下载导出2：使用a标签，指定a标签的download属性后导出的Excel文件有文件名!!!

document.getElementById("excelOut2").download = "导出excel哦";//指定导出的Excel文件名称

document.getElementById("excelOut2").href = uri + base64(template);//使用a标签的download属性可以指定导出的Excel文件名

}
//输出base64编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/newcapecjmc/p/11540240.html

layer系列之table导出功能总结相关推荐

  1. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...

  2. vue项目+xlsx+xlsx-style 实现table导出为excel的功能——技能提升

    vue项目+xlsx+xlsx-style 实现table导出为excel的功能 最近遇到一个需求,后端提供一组数据,根据这组数据,导出为一个excel表格. 步骤如下: 1. 导出内容的预览如下:包 ...

  3. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2-新增模块管理界面导出功能（可按条件导出）...

    RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->新增模块管理界面导出功能(可按条件导出) 导出功能在很多应用场景中都需要,RDIFramework.NET V3 ...

  4. Spring MVC 实现Excel的导入导出功能(2：Excel的导入优化和Excel的导出)

    Excel的导入V2优化版 有些时候文件上传这一步骤由前端来处理,只将上传后的 URL 传输给后端(可以参考上一文中的图片上传功能),也就是导入请求中并不会直接处理 MultipartFile 对象, ...

  5. 学习ASP.NET Core Razor 编程系列九——增加查询功能

    原文:学习ASP.NET Core Razor 编程系列九--增加查询功能 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.N ...

  6. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...

  7. JS组件系列——Bootstrap Table 表格行拖拽

    JS组件系列--Bootstrap Table 表格行拖拽 原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...

  8. Mybatis框架 导入/导出功能的实现

    导出功能: 1.dao层的mapper(写方法名) 2.xml里用sql语句实现mapper中的方法  注意: 映射时对比数据库段名和bean变量名 映射的property和sql语句需要查询的所有变 ...

  9. vue3.0 execle 导出功能实现

    vue3.0 execle 导出功能实现 安装 引入 给table加ref属性 获取需要导出的execle表格元素并导出 安装 npm install --save xlsx npm install ...

最新文章

  1. 服务器日志显示乱码,CentosOS 6.5 服务器 控制台输出中文乱码，日志打印中文也乱码...
  2. hql删除mysql语句_mysql-使用Hibernate @SQLDelete对所有实体进行软删除
  3. oracle rac vip什么用,oracle 10g,11g RAC中vip作用
  4. 【三种可能问题】RuntimeError: cuDNN error: CUDNN_STATUS_NOT_SUPPORTED
  5. docker安装ActiveMQ
  6. nginx给php做统一入口,Nginx如何来配置隐藏入口文件index.php（代码）
  7. C# hashtable
  8. shell oracle查询数组,shell 脚本 ---数组
  9. 机器学习week8 ex7 review
  10. Unicode-objects must be encoded before hashing
  11. OpenCV辅助对象(help objects)(3)——Ptr
  12. 第二增长曲线：如何发现击穿破局点的单一要素？
  13. Tomcat pool 发布脚本
  14. Java - “JUC”原子类
  15. c++大作业--学籍管理系统--
  16. oracle汉字转拼音
  17. STM32F103ZET6+红外温度传感器mlx90614芯片
  18. 最近再看一遍《X战警》系列
  19. DEC6713开发板的摸索（1）
  20. 炫酷canvas网页背景动画效果

热门文章

  1. ABAP ALV 总结
  2. 对话摘要技术在美团的探索（SIGIR）
  3. 量子计算——新兴领域的前沿技术
  4. SAP查看SPRO配置对应的事务码
  5. 三星981安装linux系统,三星笔记本电脑R18安装Ubuntu 8.04经验总结
  6. 血的教训,都是卡巴斯基范的错
  7. MindNode针对apple M1进行了优化更新
  8. android 商米扫码sdk,应用市场外部调用SDK接口
  9. 蓝牙mesh、wifi、zigbee和lora、NB-lot区别和联系
  10. [附源码]JAVA+ssm计算机毕业设计爱宝贝影楼管理系统（程序+Lw)