html+js代码实现table导出Excel表格功能_table分页多选导出excel表格源码-CSDN博客

本文链接：https://blog.csdn.net/weixin_45536587/article/details/108608538

1. table表格页面样式

在这里插入图片描述

2. 导出数据样式

3.HTML页面代码

<table id="score" cellspacing="0" cellpadding="0" border="1" solid="#000000" width="200px"  height="40px"   text-align="center" >
   <tr>
       <th>姓名</th>
       <th>班级</th>
       <th>数学成绩</th>
       <th>历史成绩</th>
    </tr>
    <tr>
       <td>张三</td>
       <td>1</td>
       <td>65</td>
       <td>83</td>
     </tr>
     <tr>
        <td>李四</td>
        <td>1</td>
        <td>34</td>
        <td>89.5</td>
     </tr>
     <tr>
         <td>王五</td>
         <td>2</td>
         <td>90</td>
         <td>95</td>
      </tr>
      <tr>
          <td>赵六</td>
          <td>2</td>
          <td>76.3</td>
          <td>80.1</td>
      </tr>
 </table>
 <button id="export" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>

4. js代码

$('#export').click(function () {
        var excel="";
        excel+="<table>";
        var html=document.getElementById("score").innerHTML;
        excel+=html;
        excel+="</table>";
        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=excelFile+"<head><style type=\"text/css\">table td {border: 1px solid #000000;width: 200px;height: 30px text-align: center;}</style></head>"+excel+"</body></html>";
        var base64data="base64,"+window.btoa(unescape(encodeURIComponent(excelFile)));
        window.open('data:application/vnd.ms-excel;'+ base64data);
    });