PHP试题网_中国最大的免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: PHP试题网于2022.06.21变更为少儿编程学院
  • PHP面试题
  • 文章列表
  • [拿来主义]使用layui.excel[javascript]组件导出当前html页面中的table数据为excel

由于经常要做一些导出报表的工具,所以必须要掌握至少两种快速导出报表的方案: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、页面示例:

image.png




4、导出效果:

image.png



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


作者:OK兄 浏览次数:129