关闭

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

616人阅读 评论(0) 收藏 举报
分类:

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" 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>
						
						<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>




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

JS 将Table数据导出到Excel表

通过JavaScript方法将table中的数据导出在excel表中,使用方便,可以直接浏览器直接下载所需要的excel表,一般适用于后台管理的导出数据需求。使用方法1.对table标签设置id,例如...
  • Admin_yi
  • Admin_yi
  • 2017-04-21 17:53
  • 5350

html Table表格数据导出EXCEL通用工具(javaee)

项目中多处需要将页面table表格导出excel,以前做法是server端写业务代码去查db,重新组织数据,生成excel,此种做法灵活、性适用性比较广,但是无法通用,鉴于此,开发一个将页面table...
  • yinghuabmf
  • yinghuabmf
  • 2015-11-02 14:41
  • 1820

POI导出JavaWeb中的table到excel下载

做项目的时候遇到这样的需求:  一个表单,输入信息点击查询得到一个table,然后导出table里的内容到excel,让用户下载。如下图:  需要解决的问题:  1、如何让一个form提...
  • w1014074794
  • w1014074794
  • 2015-12-05 09:32
  • 2413

web前端开发系列---Web页面导出excel时的格式问题(长数字显示为科学计数法格式等)

当我们把web页面上的数据导成excel形式时,有时候我们的数据需要以特定的格式呈现出来,这时候我们就需要给cell添加一些样式规格信息。        首先,我们了解一下excel从web页面...
  • wwww1988600
  • wwww1988600
  • 2012-10-19 09:19
  • 1547

【Web前端开发】Vue+AJAX+Bootstrap-table导致失效问题

AJAX+Bootstrap-table 遇到的Bug
  • GO_D_OG
  • GO_D_OG
  • 2017-12-12 12:07
  • 132

WEB前端开发学习----2.HTML表格table标签

在css没用流行之前,网页都是用表格,也就是table标签制作的。虽然现在不用table
  • carlosli
  • carlosli
  • 2014-08-04 03:13
  • 4879

[前端开发] 垂直居中,flexbox/table-cell/absolute

最近写前端较多,其中头疼的一个问题就是居中问题,尤其是垂直居中。 不确定宽高的元素要实现垂直居中,总结了以下三种方式:1.absolute布局代码:/** * absolute布局居中, * ...
  • gopain
  • gopain
  • 2015-11-15 11:33
  • 1306

web前端开发需要学习什么内容已经需要使用什么开发工具?

今天来和大家讲讲web前端开发需要学习什么?前端开发又需要用到哪些开发工具?然后分享一些前端开发的视频教程给大家,然后也简单的和大家介绍下前端开发的前景和薪水工资情况.   web前端工程师其实在不...
  • slieng12571
  • slieng12571
  • 2015-08-09 15:06
  • 460

源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-修改内容

示例效果: JS代码: $(function() { $('li:contains("pine")').text('almonds'); $('li.hot').html(functi...
  • hpdlzu80100
  • hpdlzu80100
  • 2016-09-27 19:17
  • 302

JS 导出网页中Table内容到excel

var idTmr; function method1(tableid) {//整个表格拷贝到EXCEL中 var curTbl = document.ge...
  • kalision
  • kalision
  • 2012-12-20 16:37
  • 38468
    个人资料
    • 访问:14029次
    • 积分:530
    • 等级:
    • 排名:千里之外
    • 原创:33篇
    • 转载:39篇
    • 译文:0篇
    • 评论:0条
    文章分类