前端开发将table内容导出到excel

青衣

jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容，不需要的行可以不导出。它文件体积小，使用非常方便。

jquery-table2excel插件的github地址为：https://github.com/rainabba/jquery-table2excel
注意导出的Excel文件的格式，默认导出为.xlsx格式的excel文件，需要excel2010以上的版本才能打开，如果是使用低版本的excel，可以手动将文件扩展名修改为.xls。
使用方法
使用table2excel表格插件需要在页面中引入jquery和jquery.table2excel.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.table2excel.js"></script>

如果表格中的某一行不需要导出到Excel中，可以为这一行添加.noExl class类，该class类会在插件初始化时通过参数被指定为不被导出的数据。
初始化插件
在页面DOM元素加载中完毕之后，可以通过下面的方法来初始化table2excel插件。

$("#table2excel").table2excel({
  // 不被导出的表格行的CSS class类
  exclude: ".noExl",
  // 导出的Excel文档的名称
  name: "Excel Document Name",
  // Excel文件的名称
  filename: "myExcelTable"
});

配置参数
table2excel插件的可用配置参数有：

exclude：不被导出的表格行的CSS class类。
name：导出的Excel文档的名称。
filename：Excel文件的名称。
exclude_img：是否导出图片。
exclude_links：是否导出超链接
exclude_inputs：是否导出输入框中的内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="datatable" class="xd_table_sj">
  <tbody>
  <tr>
<td><div align="center" id="titlelable">起始时间</div></td>
<td><div align="center" id="titlelable">通信地点</div></td>
<td><div align="center" id="titlelable">上网方式</div></td>
<td><div align="center" id="titlelable">总时长</div></td>
<td><div align="center" id="titlelable">总流量</div></td>
<td><div align="center" id="titlelable">套餐优惠</div></td>
<td><div align="center" id="titlelable">优惠或减免</div></td>
<td><div align="center" id="titlelable">通信费</div></td>
<td><div align="center" id="titlelable">终端类型</div></td>
</tr>

<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 01:57:05</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 01:58:55</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.007</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 07:00:00</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 07:23:19</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.084</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 08:16:31</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 08:16:39</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.06</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 08:28:44</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.002</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 08:34:50</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.259</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 08:34:50</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>1.26</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 09:54:53</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>1.357</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 09:56:29</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.003</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 09:56:31</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.009</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 09:56:33</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.583</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 10:27:16</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 10:28:58</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.004</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 12:44:12</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.001</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 12:45:41</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.411</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 12:57:42</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.024</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#EFFEDD" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
<td>10-01 12:57:50</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.009</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
<tr bgcolor="#ffffff" οnmοuseοver="this.style.background='#D2FCA0'" οnmοuseοut="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);">
<td>10-01 12:57:52</td>
<td></td>
<td>CMNET</td>
<td>0秒</td>
<td>0.007</td>
<td>校园4G套餐-400M国内流量</td>
<td></td>
<td>0.00</td>
<td></td>
</tr>
 </tbody>
 </table>
<button>导出EXCEL</button>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.table2excel.js"></script>
<script>
$('button').click(function(){
console.log(1)
$("#datatable").table2excel({
    exclude: ".noExl",
    name: "Excel Document Name",
    filename: "myFileName",
    exclude_img: true,
    exclude_links: true,
    exclude_inputs: true
  });
})
</script>
</body>
</html>

[jQuery] 前端开发将table内容导出到excel

相关帖子

教你使用HTML/CSS和Three.js的喷火龙小游戏

基于 HTML+CSS+JS 的石头剪刀布游戏

HTML/JS/PHP网站底部获取当前年份代码

html+Js获取当前时间代码

nginx启ssi方法，宝塔面板nginx开启ssi

常用HTML网页跳转的几种方法

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

CSS3荧光灯文字闪烁动画特效

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

青衣 LV4

[jQuery] 前端开发 将table内容导出到excel