由于经常要做一些导出报表的工具，所以必须要掌握至少两种快速导出报表的方案：1、导出当前html页面数据到excel，即可以PHP也可以javascript进行导出； 2、导出所有页面数据到excel，这个就必须要PHP进行导出了。

这次要进行导出的为两个table中的数据，如果用PHP进行导出，要画两个不同的表头，时间上不划算，直接使用javascript进行导出，省点时间。

注：使用javascript导出excel要用到layui.excel组件。

步骤：

1、引入js相关库：

<link rel="stylesheet" type="text/css" href="{$Think.PLUGINS_SITE_ROOT}/layuiv2.4.3/css/layui.css">
<script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/layuiv2.4.3/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '{$Think.PLUGINS_SITE_ROOT}/layuiv2.4.3/lay/extend/'
    }).extend({
        excel: 'excel'
    });
</script>

2、导出excel核心代码：

<script>
layui.use(['jquery', 'layer', 'excel', 'table'], function(){
    var $ = layui.jquery;
    var layer = layui.layer;
    var excel = layui.excel;

    function exportFile() {
        var member_name = $('#exportexcel').attr('dataname');//用户名称
        var tableArr1   = new Array();
        var tableArr2   = new Array();
        var title1      = new Array();
        var title2      = new Array();

        //获取table表头信息
        var headers = $(".zt-table .thead:last th");
        for (var j = 0; j < headers.length; j++) {
            var tmp = $(headers[j]).text();
            title1.push(tmp);
        }
        //获取table数据内容
        var tr1 = $(".zt-table tbody tr");
        for (var j = 0; j < tr1.length; j++) {
            var contents = new Array();
            var tds      = $('td', tr1[j]);
            for (var i = 0; i < tds.length; i++) {
                contents[i] = $(tds[i]).text();
            }
            tableArr1.push(contents);
        }
        //将标题行置顶添加到数组
        tableArr1.unshift(title1);



        //获取第二个表头
        var headers = $(".jt-table .thead:last th");
        for (var j = 0; j < headers.length; j++) {
            var tmp = $(headers[j]).text();
            title2.push(tmp);
        }
        //获取第二个table数据内容
        var tr1 = $(".jt-table tbody tr");
        for (var j = 0; j < tr1.length; j++) {
            var contents = new Array();
            var tds      = $('td', tr1[j]);
            for (var i = 0; i < tds.length; i++) {
                contents[i] = $(tds[i]).text();
            }
            tableArr2.push(contents);
        }
        //将标题行置顶添加到数组
        tableArr2.unshift(title2);

        console.log(tableArr1);

        //导出excel
        excel.exportExcel({
            '直接推荐':tableArr1
            ,'间接推荐':tableArr2
        }, '用户手机[' + member_name + ']推荐代理商列表' + new Date().toLocaleString() + '.xlsx', 'xlsx');
    }

   /**
    * 页面加载事件
    */
    $(function(){
        $('#exportexcel').off('click').on('click', function(){
            exportFile();
        });
    });

});
</script>

3、页面示例：

4、导出效果：

写在最后：这种导出方案实在是太方便了，两个表格的header不同的时候，JS导出最为方便。

作者：OK兄 浏览次数：129