LayUI——下載表格

參考：https://www.cnblogs.com/buwang/p/10735449.html

在layui基礎上使用插件;https://github.com/wangerzi/layui-excel

閱讀：快速上

目的：

實現：

代碼實現：

  <div class="layui-content">
     
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="form-box">
                     <form class="layui-form layui-card-body">
                        <div class="layui-form layui-form-item">
                         
                            <div class="layui-inline">
                                <div class="layui-form-mid">學生姓名:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                  <input type="text" id="sname" autocomplete="off" class="layui-input" name="sname" >
                                </div>
                                <div class="layui-form-mid">課程名:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                  <input  id="cname"   name="cname"type="text" autocomplete="off" class="layui-input">
                                </div>
                               <!-- lay-submit提交按鈕標識 lay-filter事件過濾器 -->
                      		<button type="button" id="permissionSubmit"class="layui-btn layui-btn-blue" data-type="reload">查詢</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                            
                        
                        </div>
                        <button  type="button" class="layui-btn layui-btn-blue" id="export" lay-submit lay-filter="uploadImg"><i class="layui-icon">&#xe601;</i>導出</button>
                        </form>
                        </div>
                        
                               <!-- lay-submit提交按鈕標識 lay-filter事件過濾器 -->
                      	
                            
                          
                       
                     
                        <table id="demo" lay-filter="parse-table-demo">
           
                        </table>
                        
                        <!--導出表 不展示
<div >
    <table id="data_export" style="display: none;">
    </table>
</div>-->
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/assets/layui.all.js"></script>
     <script src="${pageContext.request.contextPath}/assets/js/jquery-3.3.1.min.js"></script>
        <script>
    layui.config({
    	base: '${pageContext.request.contextPath}/assets/js/layui_exts/',
    }).extend({
        excel: 'excel',
    });
    layui.use(['jquery', 'form','excel', 'layer'], function(){
    	 var excel = layui.excel;
		var   form = layui.form;
    	/*初始化表格   	  
var table = layui.table;
    	  table.render({
    	    elem: '#demo'
    	    ,url: "${pageContext.request.contextPath}/report/lists"//'' //數據接口
    	    ,cols: [[ //標題欄:field：設定字段名, sort：是否需要排序
    	      {field: 'sname', title: '學生', width: 200}
    	      ,{field: 'sclass', title: '班級', minWidth: 150}
    	      ,{field: 'cname', title: '課程', minWidth: 150}
    	      ,{field: 'time', title: '時間', minWidth: 150}
    	      ,{field: 'ename', title: '出錯類型', minWidth: 150}
    	      ,{field: 'count', title: '出錯次數', minWidth: 150}
    	    ]]
    	    
    	    ,skin: 'line' //表格風格
    	    ,even: true
    	    ,page: true //是否顯示分頁
    	    ,limits: [5,10,20,30]
    	    ,limit: 5 //每頁默認顯示的數量
    	    , id: 'tableOne'  
    	    	,
                done: function (res, curr, count) {
                    exportData=res.data;
                }

    	  });
    	
    	  */    	  
    	  form.on('submit(uploadImg)', function(data){
    	     console.log("表單數據");
    	     console.log(data.field); //當前容器的全部表單字段，名值對形式：{name: value}
    	        $.ajax({
    	            url: '${pageContext.request.contextPath}/report/downData',
    	            method:'post',       
	                data:data.field,
	                dataType:'JSON', 
    	            success: function(res) {
    	                
    	              
    	                // 假如返回的 res.data 是需要導出的列表數據
    	                console.log(res);//
    	                // 1. 數組頭部新增表頭
    	                res.unshift({sname: '學生',sclass: '班級', cname: '課程',time: '時間', ename: '出錯類型',count: '出錯次數'});
    	                // 3. 執行導出函數，系統會彈出彈框
    	              //  2. 如果需要調整順序，請執行梳理函數
              var data = excel.filterExportData(res, [
                  'sname',
                  'sclass',
                  'cname',
                  'time',
                  'ename',
                  'count',
              ]);

    	                excel.exportExcel({
    	                    sheet1: res
    	                }, '平臺流水.xlsx', 'xlsx');
    	            },
    	            error:function(res){
    	              
    	                layer.msg("jdshkjfdhkjhfkj");
    	            }
    	        });
    	        return false;//阻止表單默認提交
    	    });
    	     	  })
   
    </script>