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

最新推荐文章于 2021-02-04 17:12:24 发布
最新推荐文章于 2021-02-04 17:12:24 发布
阅读量1.2w 收藏 16
点赞数 7
分类专栏： jQuery JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hefeng6500/article/details/78449436
版权

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>




兰亭古墨
关注
专栏目录
Vue - 详细实现将复杂 table 表格导出到 Excel(xls) 文件，支持原生表格、ElementUI 复杂表格、Ant Design Vue 复杂表格（将前端表格“所见所得“导出）
王佳斌
02-21 2877
vue2，excel，xls，电子表格，ant design vue，elementUI，table表格导出，将网页上的表格原封不动的导出成excel，vue2如何将组件库的表格导出excel，vue将页面上的表格导出，实现导出表格并合并单元格，vue+element表格导出为Excel文件，无法导出很复杂表格怎么办，vue2导出复杂表格，表格很复杂用什么办法能导出为xls文件，纯前端导出，所见所得导出表格，vue2表格很多合并行和列怎么导出成excel，复杂表格多行多列合并的导出，Vue导出复杂excel
Vue3 - 详细实现将复杂 table 表格导出到 Excel(xls) 文件，支持原生表格、Element Plus 复杂表格、Ant Design Vue 复杂表格（将前端表格“所见所得“导出）
王佳斌
02-21 3452
vue3，excel，xls，电子表格，ant design vue，element plus，table表格导出，vue3导出复杂表格，表格很复杂用什么办法能导出为xls文件，纯前端导出，所见所得导出表格，vue3表格很多合并行和列怎么导出成excel，复杂表格多行多列合并的导出，Vue导出复杂excel表格，将网页上的表格原封不动的导出成excel，vue3如何将组件库的表格导出excel，vue将页面上的表格导出，实现导出表格并合并单元格，vue+element表格导出为Excel文件，无法导出很复杂
table表格导出为excel
08-09
table表格导出为excel，方便快捷，非常实用，可以私信我我给你私信发送
table导出为Excel
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
10-22 426
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="renderer" content="webkit" /&gt; &lt;meta http-equiv="X-UA-Compatible" conte
table导出为excel
我的IT之旅
06-25 129
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;title&gt;导出为excel 之我的方法&lt;/title&gt; &lt;style type="text/css" rel="stylesheet"&gt; TABLE {bord
使用C#或javascript将Table里的数据导出到Excel
weixin_30821731的博客
01-27 98
Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图，引用时只需在视图中使用如下代码即可： @{ Html.RenderAction("Index", "ExportExcel", new { divId = "report", filename = "hidTitle" }); ...
table导出为excel表格
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
08-09 266
所需要的js下载地址：https://download.csdn.net/download/qq_38880700/10592847(不方便下载可以私信我我给你发) 使用注意：table一定要写规范，table一定要写规范，table一定要写规范! 表头要用&lt;thead&gt;&lt;/tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt...
前端页面导出table中的内容到excel
10-26
在前端开发中，有时我们需要将用户在网页上看到的表格数据导出到Excel文件中，以便用户可以离线查看或进一步处理。这个过程涉及到的技术主要包括HTML表格操作、数据转换和文件下载。以下是对这个主题的详细说明： 1...
前端导出Excel table2excel
11-20
"前端导出Excel table2excel"就是这样一个解决方案，它实现了在浏览器端将HTML表格直接转换为Excel文件，实现了“所见即所得”的效果。这个功能对于数据展示和分析非常有用，比如用户可以在查看完网页上的数据后，...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到Excel的功能。 首先，我们需要了解`el-table`。它是Element UI的一部分，提供了一种灵活的方式来展示和操作表格数据...
将table数据导出到excel
05-11
自己通过对jquery.table2excel.js源码改写，使其支持IE浏览器，且不会出现安全提示，数据导出速度很快，和网上现有的不一样。（如低版本IE不能用，请降低Jquery版本）
jquery.table2excel.js（用于table导出Excel文件）
01-11
里面包含了jquery.table2excel.js，用于table直接导出Excel文件，有例子可以参考
IE下将table导出成excel
12-21
html导出excel 下载直接使用以下方法即可导出 method1('tableid')" method2('tableid')" method3('tableid')"
javascript 将table数据导出到excel中（支持表格线的导出）
03-18
NULL 博文链接：https://bear999.iteye.com/blog/692594
JQ导出table到Excel
07-15
解压点击index.html直接就能看效果 兼容性未测 不过基本的谷歌啊搜狗是没问题的 ie就算了吧 过时的不必要去兼容它 这个是JQ导出table到excel 支持多种格式 好用请给好评~~ 蟹蟹
将table表格导出为excel
object_orient的博客
04-03 1414
（本文只用于导出前台已有的表格） 本篇教程我们会看到如何把JSP页面导出到Excel中，会在已有的JSP页面中增加导出excel的功能。 我们需要在js中加入以下方法 <html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> <scrip...
HTML Table导出为excel格式
月下弦歌冷的博客
02-04 666
最近项目中有个需求是将页面写好的表格导出位excel格式，刚开始毫无头绪，经过一番查阅找到了解决办法，废话不多说直接上代码: const tableToExcel = (() => { const uri = 'data:application/vnd.ms-excel;base64,'; const template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:s
table表格导出Excel表格
rouduo_zjy的博客
12-06 281
HTML页面中table导出Excel表格 代码展示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta...
前端vue将table的样式导出为excel
最新发布
03-06
在前端使用Vue导出表格样式为Excel，可以通过以下步骤实现： 1. 首先，你需要安装并引入`xlsx`和`file-...这样，当用户点击"导出Excel"按钮时，会触发`exportToExcel`方法，将表格数据导出为Excel文件并保存到本地。
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值