web页面中导出Excel (方法四) 纯 js 前端将table中数据导出Excel 使用 js-xlsx

这个示例使用前端 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>

<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);   

?>