THML嵌套table导出Excel

最新推荐文章于 2025-04-10 14:47:04 发布

原创最新推荐文章于 2025-04-10 14:47:04 发布 · 757 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html导出excel #表格嵌套 #js #table2excel

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种将HTML表格数据导出为Excel的方法：一种支持嵌套表格，通过将HTML代码打包成完整文档并转换为Blob对象实现；另一种使用table2excel插件，但不支持嵌套表格。两种方法均可有效实现数据导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.支持表格嵌套的HTML导出到Excel。这种方式生成的文本文件是HTML代码，不是真正的Excel文件。但是可以被Excel解析，并且还附带有样式。但是每次打开时会弹出提示“文件安全性有问题”对话框。源码如下：

// 导出excel，支持表格嵌套
    $('body').on('click', '.exportExcel', function () {
        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        //获取表格
        var tableHtml = $('#example');  // 所需导出table的id
        //不能显示class的样式，所以自己重新添加样式 主要为设置边框 格子大小
        $(tableHtml).css({
            'border': '1px solid #d5d5d2',
            'text-align': 'center',
            'border-collapse': 'collapse'
        });
        $(tableHtml).find('tr th').css({
            'text-align': 'center',
            'border': '1px solid #d5d5d2',
            'line-height': '30px',
            'padding': '0px 10px',
            'min-width': '100px'
        });
        $(tableHtml).find('tr td').css({
            'text-align': 'center',
            'border': '1px solid #d5d5d2',
            'line-height': '30px',
            'padding': '0px 10px',
            'min-width': '100px'
        });

        var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], {type: "application/vnd.ms-excel"});
        var urlA = document.createElement('a');
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        $('.table-btn-group').append(urlA);
        urlA.href = URL.createObjectURL(blob);
        // 设置文件名，目前只有Chrome和FireFox支持此属性
        urlA.download = "导出文件名称.xls";
        urlA.click();
    });

2.使用table2excel导出excel，不支持嵌套表格的导出

    //导出表格
    $('body').on('click', '.exportExcel', function () {
        $("#example").table2excel({   // 所需导出table的id
            exclude: ".operate",   // 不需要导出的栏位td
            name: "名称",
            filename: "导出文件名称",  
            fileext: ".xls",  //文件类型
            exclude_img: true,  //导出图片
            exclude_links: true,  //导出链接
            exclude_inputs: true  //导出输入框
        });
    });