Html 非标准table JS导出Excel

最新推荐文章于 2023-02-06 09:55:21 发布

董家郎

最新推荐文章于 2023-02-06 09:55:21 发布

阅读量216

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/u011204852/article/details/117327279

版权

Html 非标准table JS导出Excel

文章目录

Html 非标准table JS导出Excel
背景
一、JQuery.table2excel.js？
二、修改方法

背景

项目需要将Html页面展示的表格进行Excel文件的导出，查询了相关资料，找到的控件均是对标准Table（严格的<td><th>形式）进行导出。由于当前结构不符合，遂改写JQuery.table2excel.js控件，以达到要求。

表格形式和结构如下图：

表格构成结构

提示：以下是本篇文章正文内容，下面案例可供参考

一、JQuery.table2excel.js？

下载地址：JQuery.table2excel.js 下载地址

自带的使用案例Html：

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Boilerplate</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
		<script src="../dist/jquery.table2excel.js"></script>
	</head>
	<body>
		<table class="table2excel" data-tableName="Test Table 1">
			<thead>
				<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
				<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
			</thead>
			<tbody>
				<tr>
					<td style="background-color: blue; color: purple;">data1a with a <a href="#">link one</a> and <a href="#">link two</a> and color won't be exported.</td>
					<td>data1b with a <img src="image_file.jpg" alt="image">.</td></tr>
				<tr>
					<td>data2a with a <input tyle="text" value="text value">.</td>
					<td>data2b with a <input tyle="text" value="second text value">.</td>
				</tr>
			</tbody>
			<tfoot>
				<tr><td colspan="2">This footer spans 2 cells</td></tr>
			</tfoot>
		</table>
		<button class="exportToExcel">Export to XLS</button>

		<table class="table2excel" data-tableName="Test Table 2">
			<thead>
				<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
				<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
			</thead>
			<tbody>
				<tr><td>data1a</td><td>data1b</td></tr>
				<tr><td>data2a</td><td>data2b</td></tr>
			</tbody>
			<tfoot>
				<tr><td colspan="2">This footer spans 2 cells</td></tr>
			</tfoot>
		</table>
		<button class="exportToExcel">Export to XLS</button>
		
		<table class="table2excel table2excel_with_colors" data-tableName="Test Table 3">
			<thead>
				<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
				<tr><td style="background-color: green;">This Should get exported as a header and maintain background color</td><td>This should too</td></tr>
			</thead>
			<tbody>
				<tr><td style="background-color: green; color: red;">data1a</td><td>data1b</td></tr>
				<tr><td>data2a</td><td>data2b</td></tr>
			</tbody>
			<tfoot>
				<tr><td colspan="2">This footer spans 2 cells</td></tr>
			</tfoot>
		</table>
		<button class="exportToExcel">Export to XLS</button>

		<script>
			$(function() {
				$(".exportToExcel").click(function(e){
					var table = $(this).prev('.table2excel');
					if(table && table.length){
						var preserveColors = (table.hasClass('table2excel_with_colors') ? true : false);
						$(table).table2excel({
							exclude: ".noExl",
							name: "Excel Document Name",
							filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, "") + ".xls",
							fileext: ".xls",
							exclude_img: true,
							exclude_links: true,
							exclude_inputs: true,
							preserveColors: preserveColors
						});
					}
				});
				
			});
		</script>
	</body>
</html>

二、修改方法

(1) 阅读控件代码后发现其核心思想是：1.读取<tr>的对象并循环构成行元素；2.读取每个<tr>内的<td>和<th>对象，以获取每行里的格子。如下图所示：

原控件的查找页面表格元素的位置

(2) 将自身非标准表格行和列元素标签进行替换，如下图：
案例修改位置
页面表格进行绑定JS：
js绑定方法

(3) 导出文件效果：
不带颜色：

导出不带颜色结果

带颜色：
导出带颜色结果
其中带自身颜色需设置属性：preserveColors。

董家郎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html 非标准table JS导出Excel

Html 非标准table JS导出Excel文章目录Html 非标准table JS导出Excel背景一、JQuery.table2excel.js？二、修改方法背景项目需要将Html页面展示的表格进行Excel文件的导出，查询了相关资料，找到的控件均是对标准Table（严格的<td><th>形式）进行导出。由于当前结构不符合，遂改写JQuery.table2excel.js控件，以达到要求。表格形式和结构如下图：提示：以下是本篇文章正文内容，下面案例可供参考
复制链接

扫一扫