html动态添加table table 一键导出excel_html写个动态table-CSDN博客

本文链接：https://blog.csdn.net/dullyoung/article/details/118901581

创建table占位和标题

   <table id="table_root" border="1" width="100%" class="tableA">
        <tr>
            <th width="20%">姓名</th>
            <th width="20%">电话</th>
            <th width="20%">地址</th>
            <th width="20%">内容</th>
            <th width="20%">备注</th>
        </tr>
        <tbody id="tbMain"></tbody>
    </table>

在这里插入图片描述

动态添加数据向table的行里面先动态添加完一行的单元格再tbody里动态添加行
- th 表头
- tr定义表格的行
- td 定义表格单元

      function add(){
            let tbody=document.getElementById("tbMain")
            let tr=document.createElement("tr");
            let td=document.createElement("td");
            td.widtd="20%";
            td.innerText="张三";
            tr.append(td)
            let td2=document.createElement("td");
            td2.width="20%";
            td2.innerText="120";
            tr.append(td2)

            let td3=document.createElement("td");
            td3.width="20%";
            td3.innerText="饭都花园";
            tr.append(td3)

            let td4=document.createElement("td");
            td4.width="20%";
            td4.innerText="玛卡巴卡";
            tr.append(td4)
            let td5=document.createElement("td");
            td5.width="20%";
            td5.innerText= Date();
            tr.append(td5)

            tbody.append(tr)

        }

在这里插入图片描述

导出

  function base64(content) {
            return window.btoa(unescape(encodeURIComponent(content)));
        }
        function tableToExcel( fileName) {
            var excelContent = document.getElementById("table_root").innerHTML;
            console.dir(excelContent)
            var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
            excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
            excelFile += "<body><table widtr='10%'  border='1'>";
            excelFile += excelContent;
            excelFile += "</table></body>";
            excelFile += "</html>";
            var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
            var a = document.createElement("a");
            a.download = fileName + ".xlsx";
            a.href = link;
            a.click();
        }

在这里插入图片描述