前端开发 将table内容导出到excel
2017-11-05 14:50
891 查看
jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容，不需要的行可以不导出。它文件体积小，使用非常方便。
jquery-table2excel插件的github地址为：https://github.com/rainabba/jquery-table2excel
注意导出的Excel文件的格式，默认导出为
使用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中，可以为这一行添加
初始化插件
在页面DOM元素加载中完毕之后，可以通过下面的方法来初始化table2excel插件。
$("#table2excel").table2excel({
// 不被导出的表格行的CSS class类
exclude: ".noExl",
// 导出的Excel文档的名称
name: "Excel Document Name",
// Excel文件的名称
filename: "myExcelTable"
});
table2excel插件的可用配置参数有：
示例：
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中，可以为这一行添加
.noExlclass类，该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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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>
a7c7
<tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="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" onmouseover="this.style.background='#D2FCA0'" onmouseout="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
- Js 导出table内容到Excel
- asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
- 将HtmlTable内容导出到Excel，使用NPOI组件
- 将HtmlTable内容导出到Excel，使用NPOI组件 分类： ASP.NET 源代码 2012-12-17 13:37 2289人阅读 评论(3) 收藏
- (ios开发)导出tableView数据至excel
- 直接客户端浏览器下载文件，不必通过回传服务器再下载(例如将table内容导出excel)
- 将HtmlTable内容导出到Excel，使用NPOI组件 分类： ASP.NET 源代码 2012-12-17 13:37 2288人阅读 评论(3) 收藏
- 把TABLE中内容导出到EXCEL
- 将HtmlTable内容导出到Excel，使用NPOI组件
- 前端实现table表格导出excel
- 怎么将officeexcel 2007内容转换成xml，自带开发工具导出 （图文详解）
- 把页面Table表格内容导出为Excel-仅是当前页面上显示的table 分页未知(转载 略修改)
- excel前端导出(bootstrap-table,tableExport)
- JS 导出网页中Table内容到excel
- 将html中table的内容导出为excel
- Js 导出table内容到Excel的简单实例
- JS 导出网页中Table内容到excel
- 使用NPOI将TABLE内容导出到EXCEL
- 直接把table内容导出到word或excel