THML嵌套table导出Excel

本文介绍两种将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  //导出输入框
        });
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xuerba

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值