这个示例使用 前端 easyui-datagrid 后端 php
这里是不是 easyui-datagrid 不重要了，是将easyui-datagrid的数据转到table，再将 table导出Excel 使用了 js-xlsx
js-xlsx 文件可自行搜索下载 ，参考 https://www.cnblogs.com/hailexuexi/p/12934054.html
优点：查询结果显示在datagrid中(不能分页)，前端直接下载不用回后端，效率高速度快。
缺点：查询结果不能分页，必须显示全部内容，显示的内容即是导出后的内容。此方法多用于统计报表中，比如以日期分组统计，结果不可能是几万行（一行为一天分组）。
当然也可以采用 方法三中的办法，页面上的table元素是 点导出按钮 ajax请求php返回全部数据，赋给table，再将table导出
参考方法三：https://www.cnblogs.com/hailexuexi/p/17480168.html
示例是将 easyui-datagrid的数据转到table中，再将 table导出Excel
界面
html
<!-- js-xlsx 方式 --> <script src="themes/plugins/js-xlsx/xlsx.core.min.js"></script> <script src="jquery.min.js"></script> <!--若主程序已加载，可注掉 --> <script src="themes/plugins/js-xlsx/excel.js"></script> <body>
<div style='padding:0px 0px 15px 12px ;'> <table> <tr> <td style="width:65px;">登陆时间:</td> <td style="padding: 0px 0px 0px 2px;"> <input id="start_date_entered" value="<{$start_date}>" placeholder="开始日期" class="my_input laydate-icon" style="height:29px;" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly ></input></td> <td><span class="input-group-addon" style="height:28px;">至</span></td> <td><input id="stop_date_entered" value="<{$stop_date}>" placeholder="结束日期" class="my_input laydate-icon" style="height:29px;" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly ></input> </td> <td style="width:10px;"> </td> <td class='width:75px;'>坐席员:</td> <td><select id="select_agent_name" name="select_agent_name" class="easyui-combobox" style="height:28px;width:160px;" editable=false ><{$select_option_agent_name}></select></td> <td style="width:10px;"> </td> <td style="padding: 0px 0px 0px 5px;"> <a href='#' class='easyui-linkbutton' iconCls='icon-select' style="height:29px;width:64px;" onclick='Select()'>查询</a> </td> </tr> </table> </div> <table id='grid'class='easyui-datagrid' style='width:1000px;min-height:450px' title='列表' iconCls='icon-table' rownumbers='true' fitColumns='true' singleSelect='true' toolbar='#toolbar' remoteSort='false'> <thead> <tr> <th field='user_id' width='25'align='center' sortable='true' >坐席工号</th> <th field='user_name' width='25'align='center' sortable='true' >坐席员</th> <th field='login_date' width='30'align='center' sortable='true' >日期</th> <th field='time_len' width='30'align='center' sortable='true' >在线时长</th> <th field='time_len_s' width='30'align='center' sortable='true' >在线时长(秒)</th> </tr> </thead> </table> <div id='toolbar' style='display: flex;align-items:Center; height:35px;' > <a href='javascript:void(0)' class='easyui-linkbutton' iconCls='icon-excel' plain='true' onclick='ToExcel()' <{$ToExcel_disabled}> >导出</a> <div class="btn-separator"></div> <a href='#' class='easyui-linkbutton' iconCls='icon-refresh' plain='true' onclick='Refresh()'>刷新</a> <a href='#' class='easyui-linkbutton' iconCls='icon-cancel' plain='true' onclick='parent.TabClose();'>关闭</a> </div> <!-- 用于导出的 table --> <table id="table_excel" style="text-align:center;display:none;" > <!-- block none --> </table>
js
<script type='text/javascript'> function Select(){ var agent_name=$('#select_agent_name').combobox('getValue'); var start_time=$('#start_date_entered').val(); var stop_time=$('#stop_date_entered').val(); var url='Api-index.php?module=<{$module_name}>&action=Api_ReportView_Agent_Login_Report_Day_Select'; var query={'agent_name':agent_name,'start_time':start_time,'stop_time':stop_time }; $('#grid').datagrid('options').url=url; $('#grid').datagrid('options').queryParams=query; $('#grid').datagrid('reload'); } function ToExcel(){ //生成---table_excel------------------------------------------------------ //第一行 列名 strRow="<tr>"; //var cols=$('#grid').datagrid('options').columns;//所有列json对象 var cols = $('#grid').datagrid('getColumnFields'); //获取所有列 //console.log(cols.length);总列数 for (var i in cols) { //获取每一列的列名对象 var col = $('#grid').datagrid("getColumnOption", cols[i]); //console.log(cols[i]);//绑定 的 字段名 //console.log(col.title.trim());//显示 的 列名 strRow=strRow + "<td>" + col.title.trim()+ "</td>"; } strRow=strRow +"</tr>"; $("#table_excel").append(strRow); //第二行至所有行 数据 var arrTable=$('#grid').datagrid('getData'); //var value=arrTable.rows[0][0]; //console.log(arrTable); for (i = 0; i < arrTable.rows.length; i++) { strRow="<tr>"; for(j=0; j<cols.length; j++){ strRow=strRow + '<td >' +"" + arrTable.rows[i][j]+"" + "</td>"; } strRow=strRow +"</tr>"; $("#table_excel").append(strRow); } //js-xlsx 方式 导出 Excel------------------------------------------------------ var table = document.querySelector("#table_excel"); var sheet = XLSX.utils.table_to_sheet(table); //将一个table对象转换成一个sheet对象 openDownloadDialog(sheet2blob(sheet), 'Book.xlsx'); //----------------------------------------------------------------------------------- } </script>
php 仅用于查询
<?php //-----------------------------------------------日统计------------------------------------ $arr_result = array(); //返回值 $where='';//查询条件 if(!empty($_POST['start_time'])){ $start_time=$_POST['start_time']; $stop_time=$_POST['stop_time']; } else{ //当天 $start_time=date("Y-m-d 0:0:0",strtotime("now")); $stop_time=date("Y-m-d 23:59:59",strtotime("now")); } //$where=" date_time >='{$start_time}' and date_time <='{$stop_time}' "; $where=" login_time >='{$start_time}' and login_time <='{$stop_time}' "; //坐席 if($_REQUEST['agent_name']!='' && $_REQUEST['agent_name']!='0'){ // $where .=" and agent_name = '{$_REQUEST['agent_name']}' "; } //结果集 $items = array(); $sql="SELECT user.user_id , agent_name as user_name,login_date,SEC_TO_TIME(sum(time_len_s)) as time_len,sum(time_len_s) as time_len_s FROM "; $sql.=" cti_agent_login join user on cti_agent_login.agent_name=user.user_id where "; $sql.=" " .$where ." GROUP BY login_date ORDER BY login_date"; //WriteLog($sql); $result_rows=$db->query($sql); $row_count=$db->num_rows($result_rows);//行数 while($row=$db->fetch_array($result_rows)) { array_push($items, $row); //WriteLog($row[2]); $time_len=$row['time_len']; $time_len_s=$row['time_len_s']; $time_len_s_sum=$time_len_s_sum+$time_len_s;//所有坐席的 在线时长(秒) } //合计------------------------------------- $row['user_name']='合计'; $row['date']=$row_count."天";//行数 表示上班天数 if($time_len_s_sum!=''){//为空则不计算 $row['time_len']=Sec2Time($time_len_s_sum);//所有坐席的 在线时长 } else { $row['time_len']=$time_len_s_sum; } $row['time_len_s']=$time_len_s_sum;//所有坐席的 在线时长(秒) array_push($items, $row); //加入数组 $arr_result['rows'] = $items; //WriteLog(json_encode($arr_result['rows'] )); echo json_encode($arr_result); ?>