layui 导出Excel 两种方式

柔光的暖阳◎ 2023-01-17 11:55 353阅读 0赞

### **1：layui自带的导出功能** ###

<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <div class="layuimini-container">
    	<div class="layuimini-main">
            
    		<script type="text/html" id="toolbarDemo">
    			<div class="layui-btn-container">
    				<button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="export" lay-filter="export"><i class="iconfont icon-export"></i> 导出Excel</button>
    			</div>
    		</script>
    				
    		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    	</div>
    </div>
    
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
    			layui.use(['form', 'table'], function () {
    		        var $ = layui.jquery,					
    		            form = layui.form,  // 表单
    		            table = layui.table; //表格
    
                    table.render({
    		            id: "currentTableId",
    		            elem: '#currentTableId',
    		            url: tableurl+'?coopid='+ coopid +'&appid='+ appid,
    		            size: 'sm',
    		            headers: {"Authorization": sessionStorage.getItem('accessToken')},
    		            method: 'get',
    					// defaultToolbar: ['filter', 'exports'], filter = 筛选列  exports = 导出文件Gsv 和 Excel
    					toolbar: '#toolbarDemo',
    					title:'市场数据',  // 导出Excel文件名
    					page: false,
    		            cols: [[
    						{field: 'date',title: '日期', sort: true,width:100},
    						{field: 'appname',title: '游戏名',width:120}
    					]],
    		            response: {
    		                statusName: 'code', //规定返回的状态码字段为code
    		                statusCode: 200 //规定成功的状态码味200
    		            },
    		            parseData:function(res) {
    		                return {
    		                    "code": res.code, //解析接口状态
    		                    "msg": res.msg, //解析提示文本
    		                    "data": res.data //解析数据列表
    		                }
    		            },
    		            done: function (res, curr, count) {
    		                // 设置当前页数
    		                localStorage.setItem("moduleCode", self.moduleCode);
    						// 导出
    						exportData=res.data;
    		            },
    				});
    				
    				// 导出Excel 文件
    				$("#export").on('click', function(){
    					//使用ajax请求获取所有数据
    					$.ajax({
    						url: '',
    						type: "get",
    						data:{
    							// 请求参数
    							type:type
    						},
    						headers: {'Accept': 'application/json', 'Authorization': sessionStorage.getItem('accessToken')},
    						dataType: 'json',
    						success(res) {
    							//使用table.exportFile()导出数据
    							table.exportFile('currentTableId', res.data, 'xls');
    						}
    						,error() {
    							layer.alert('获取数据失败');
    						}
    					});
    				})
            });
    </script>

### **2：layui** 导出插件 layui.excel ###

![20210429113638387.png][]

<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <div class="layuimini-container">
    	<div class="layuimini-main">
            
    		<script type="text/html" id="toolbarDemo">
    			<div class="layui-btn-container">
    				<button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="export" lay-filter="export"><i class="iconfont icon-export"></i> 导出Excel</button>
    			</div>
    		</script>
    				
    		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    	</div>
    </div>
    
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
    // 注：lay_exts/ 为扩展中所有文件的存放路径
    layui.config({ // 配置并导入excel插件
    		base: '../lib/layui-v2.5.5/layui_exts/'
    	).use(['jquery', 'excel', 'layer', 'form', 'table'], function() {
    	var $ = layui.jquery,
    		excel = layui.excel,
    		layer = layui.layer,
    		form = layui.form, // 表单
    		table = layui.table; //表格
        
        // 加载框
    	var loading;
    	loading = layer.load(1, {shade: [0.3, '#fff']});    
    
        table.render({
    		id: "currentTableId",
    		elem: '#currentTableId',
    		url: tableurl+'?coopid='+ coopid +'&appid='+ appid,
    		size: 'sm',
    		headers: {"Authorization": sessionStorage.getItem('accessToken')},
    		method: 'get',
    		// defaultToolbar: ['filter', 'exports'], filter = 筛选列  exports = 导出文件Gsv 和 Excel
    		toolbar: '#toolbarDemo',
    		page: false,
    		cols: [[
    			{field: 'date',title: '日期', sort: true,width:100},
    			{field: 'appname',title: '游戏名',width:120}
    		]],
    		response: {
    		    statusName: 'code', //规定返回的状态码字段为code
    		    statusCode: 200 //规定成功的状态码味200
    		},
    		parseData:function(res) {
    		    return {
    		         "code": res.code, //解析接口状态
    		         "msg": res.msg, //解析提示文本
    		         "data": res.data //解析数据列表
    		    }
    		},
    		done: function (res, curr, count) {
    		     layer.close(loading);
    		},
    	});
    	
        $("#export").on('click', function() {
    		var apihost = '';
    		$.ajax({
    		    url: apihost + 'data/stat/getAllAnalysisPromoteData',
    		    type: "Get",
    		    data: {
    			    type: type
    		    },
    		    headers: {
    				'Accept': 'application/json',
    				'Authorization': sessionStorage.getItem('accessToken')
    		    },
    		    dataType: 'json',
    		    success(res) {
    			    var data = res.data;
    		        // 重点1：如果后端给的数据顺序和映射关系不对，请执行梳理函数后导出
    			    data = excel.filterExportData(data, [
    				    'date',
    				    'appname'
    			    ]);
    			    // 重点2：一般都需要加一个表头，表头的键名顺序需要与最终导出的数据一致
    			    data.unshift({
    			        date: "日期",
    				    appname: "游戏名"
    			    });
    			    var timestart = Date.now();
    				    excel.downloadExcel(data, '导出接口数据', 'xlsx');
    			    var timeend = Date.now();
    
    			    var spent = (timeend - timestart) / 1000;
    				layer.alert('单纯导出耗时 ' + spent + ' s');
    		    },
    		    error() {
    			    layer.alert('获取数据失败');
    		    }
    	    });
       });
    });
    </script>

[20210429113638387.png]: /images/20221021/3f21894524b34c4c90e1910734253d84.png

发表评论取消回复

表情：

评论列表（有 0 条评论，353人围观）

还没有评论，来说两句吧...

相关阅读

相关关于java操作excel导入导出三种方式

一、介绍在平时的业务系统开发中，少不了需要用到导出、导入excel功能，今天我们就一起来总结一下，如果你正为此需求感到困惑，那么阅读完本文，你一定会有所收获！二、

矫情吗；*/ 2024年03月27日 11:10/ 0 赞/ 72 阅读

相关基于poi的三种excel导出方式

文章目录简介一、直接遍历数据设值导出所需依赖 controller代码 service代码

深碍√TFBOYSˉ_/ 2024年03月17日 17:48/ 0 赞/ 88 阅读

相关 layui 导出Excel 两种方式

1：layui自带的导出功能 <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css"

柔光的暖阳◎/ 2023年01月17日 11:55/ 0 赞/ 354 阅读

相关 node.js 导出的两种方式

第一种方式导入导出 var fun = function(a, b){ return parseInt(a) + parseInt(b) }

古城微笑少年丶/ 2022年12月18日 12:56/ 0 赞/ 203 阅读

相关关于导出文件的两种思考方式

有时候我们需要做文件导出的需求，这里以导出excel文件为例，给出两种方式。 1、文件内数据不是很多的时候，比如只有“千”这个数量级的时候，我们可以用“流”的方式从客户端导出

╰半橙微兮°/ 2022年09月12日 01:50/ 0 赞/ 196 阅读

相关 struts2 导出excel的两种写法

写法一：优点是在服务器端不产生文件，直接在客户端下载excel ByteArrayOutputStream baos = new ByteArrayOutputStr

ゞ浴缸里的玫瑰/ 2022年08月24日 05:10/ 0 赞/ 168 阅读

相关 PHP导出excel文件的几种方式

先说说动态生成的内容当作文件来下载的方法： 1、通过把Content-Type设置为application/octet-stream，可以把动态生成的内容当作文件来下载；co

骑猪看日落/ 2022年07月12日 03:11/ 0 赞/ 261 阅读

相关 DLL中导出函数的两种方式

转自 [http://blog.csdn.net/airjordan\_1122/article/details/6176463][http_blog.csdn.net_air

一时失言乱红尘/ 2022年05月20日 10:28/ 0 赞/ 813 阅读

相关 Xml方式导出Excel

用Excel 编辑表格样式打印样式等另存为后缀名为 .xml格式的文件 ![2012071415174368.png][] 以文本形式打开 ,可以看到文件编

Myth丶恋晨/ 2021年11月10日 13:08/ 0 赞/ 279 阅读

相关 C++ DLL导出的两种方式和链接的两种方式

第一种导出方式 extern "C" _declspec(dllexport) int Plus(int x, int y); extern "C"

野性酷女/ 2021年10月24日 02:54/ 0 赞/ 495 阅读