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

1811人阅读 评论(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>




查看评论

js将table导出excel 之文件改名及格式化全攻略

之所以写该文,因为网上有很多js将table导出excel的方法,都大同小异,但大都存在这样或那的样的问题使大家不得不放放弃,从而转向从后台导出,常见问有三个 1.不兼容大多数浏览器 2.无法自己定义...
  • fengjingzhu
  • fengjingzhu
  • 2016-12-13 09:29:26
  • 8265

table转化为excel通用之tableExporter

table转化为excel通用之tableExporter.js本人引用了tableExpor.js ,你只需要把下面这段js代码拷贝单独创建,然后引入就行.调用方法 $(‘.dataTable...
  • q3585914
  • q3585914
  • 2017-03-27 14:40:39
  • 434

导出网页中的table到excel

还是那个客户的那个要求他的意思其实就是要把数据库里的数据能够导出到excel不过上次那个sql>>excel的功能我觉得不是很好,因为数据是导出来了,可是数据的相关属性和名称,每一列的数据分别是什么都...
  • fableking
  • fableking
  • 2007-03-07 12:22:00
  • 4868

JS 将Table数据导出到Excel表

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

HTML用JS导出Excel的五种方法

这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) html 表格导出道 ...
  • aa122273328
  • aa122273328
  • 2015-12-23 17:37:34
  • 93983

js把html中的table数据导出到Excel中

//导出通用方法,在onlick事件中调用getImport(table名称)即可   var idTmr; function getExplorer() {     var explorer = w...
  • qq_34313263
  • qq_34313263
  • 2017-05-08 14:11:01
  • 3323

将table数据导出到excel

  • 2017年05月11日 16:42
  • 75KB
  • 下载

bootstrap table和tableExport导出支持中文的Excel和pdf等表格

前言由于最近项目有一个导出表格为pdf格式,所以就做了这个功能。由于项目的表格是基于bootstrap和bootstrap table实现的,相对于easyUI来说它的优点是更方便,更好兼容。从代码可...
  • youand_me
  • youand_me
  • 2017-08-03 18:28:59
  • 8173

将Table表格导出到Excel

1.导出当前页  效果如下: 前台代码: @{ Layout = null; } "viewport" content="width=dev...
  • shuai7boy
  • shuai7boy
  • 2016-11-17 17:23:43
  • 1001

html中table导出成excel

  • 2017年07月10日 18:14
  • 56KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 674
    排名: 7万+