js导出网页的表格table的Excel其中有隐藏电话为xx

本文链接：https://blog.youkuaiyun.com/weixin_38110122/article/details/129699299

利用 html 的 table 表格的格式书写想要的 excel 格式
获取 table 的内容并组装成一个 xls 格式的字符串
利用 Blob 对象生成一个 xls 格式的文件
利用 a 标签的 download 属性创建文件名，并下载到本地

首先建个html，然后把如下代码copy

<table id="dataTable">
    <thead>
        <tr class="title">
            <th colspan="4">学生信息</th>
        </tr>
        <tr>
            <th>电话</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a title="1762222811">17****</a></td>
            <td>男</td>
            <td>19</td>
            <td>1班</td>
        </tr>
        <tr>
            <td><a title="1762222811">17****</a></td>
            <td>男</td>
            <td>20</td>
            <td>2班</td>
        </tr>
        <tr>
            <td><a title="1762222811">17****</a></td>
            <td>男</td>
            <td>29</td>
            <td>3班</td>
        </tr>
        <tr class="footer">
            <td colspan="4">总人数：3人</td>
        </tr>
    </tbody>
</table>
<button id="btnExport" onclick="btnExportExport()">导出Excel</button>
<script>
    function btnExportExport() {
        //获取table的html内容
        //dataTable可以动态传入
        var elements = document.getElementsByTagName('a');

        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].getAttribute("title"));
            elements[i].innerText = elements[i].getAttribute("title")
        }
        var oHtml = document.getElementById("dataTable").outerHTML;

        //es6的字符串语法``和${},http://es6.ruanyifeng.com/#docs/string#模板字符串 "es6字符串模板"
        var excelHtml = `
            <html>
            <head>
            <meta charset='utf-8' />
            <style>
                 table th,table td{ border:1px solid black;}  
            </style>
            </head>
            <body>
            ${oHtml}
            </body>d
            </html>
    `;

        //Blob 构造函数,生成Excel
        var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' })
        // 创建一个a标签
        var oA = document.createElement('a');
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        oA.href = URL.createObjectURL(excelBlob);
        // 给文件命名
        oA.download = 'Js导出示例.xls';
        // 模拟点击
        oA.click();
        // 移除
        oA.remove();
    };
</script>

补充：
1.Blob 对象表示不可变的类似文件对象的原始数据。Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

2.URL.createObjectURL () 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。