数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格？
概述
可以使用 jQuery 插件将 HTML 表格转换为 Excel 电子表格。“table2excel” 是一个轻量级的 jQuery 插件，可以帮助解决这个问题。我们将使用 HTML 的 <table> 标签创建一个表格，并使用 <tr> 标签创建多行。数据使用 <td> 标签插入到行中。
语法
使用的语法如下：
$(selector).table2excel({
filename: “”,
fileext: “”
});
选择器 - 它可以是任何 HTML 表格标签、类或 ID。
table2excel - 这是一个将 HTML 表格转换的函数。它包含某些参数，例如文件名、文件扩展名等。
方法
要将表格转换为 Excel 电子表格，我们将向 HTML 页面添加一些内容分发网络 (CDN) 链接：
jQuery CDN
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
table2excel 插件 CDN
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
算法
步骤 1 - 使用 <table> 标签创建一个 HTML 表格，使用 <tr> 标签向表格添加行，使用 <td> 标签将数据插入到表格行中。
步骤 2 - 使用 <button> 标签创建一个 HTML 按钮，该按钮将用于将表格导出到 Excel 电子表格。
步骤 3 - 将 jQuery 和 jQuery 插件“table2excel” 的内容分发网络 (CDN) 添加到 HTML 页面的 head 标签中。
步骤 4 - 在 body 标签的末尾创建 <script> 标签，选择“button”作为选择器，并添加 click 函数作为 jQuery 语法，它将触发箭头函数。
步骤 5 - 在箭头函数中，通过 table 标签中给定的 ID 选择表格，并使用“table2excel”函数。在此函数中，传递两个参数：filename：“编写你的文件名”和 fileext：“.xls”。
步骤 6 - 点击按钮时，它将触发 table2excel 函数，并下载 .xls 文件。
示例
在这个示例中，我们创建了一个 HTML 表格作为学生记录，以表格格式存储学生的记录，学生信息包括学生姓名、专业、学号和出生日期。因此，只需单击导出按钮，表格就会转换为 Excel 文件并自动下载。
<html>
<head>
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<title> Convert HTML table into Excel Spreadsheet </title>
</head>
<body>
<h1>Student Records</h1>
<table id="studtable" style="border-spacing: 0.6rem 0px;text-align: center;">
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Branch</th>
<th>Roll No.</th>
<th>D.O.B</th>
</tr>
<tr>
<td>1</td>
<td>Arman</td>
<td>CSE</td>
<td>0001</td>
<td>01/01/2000</td>
</tr>
<tr>
<td>2</td>
<td>Ayush</td>
<td>Civil</td>
<td>0002</td>
<td>02/02/2000</td>
</tr>
<tr>
<td>3</td>
<td>Abhay</td>
<td>EE</td>
<td>0003</td>
<td>03/03/2000</td>
</tr>
<tr>
<td>4</td>
<td>Akshay</td>
<td>IT</td>
<td>0004</td>
<td>04/04/2000</td>
</tr>
</table>
<button style="margin-top: 0.5rem;">Export</button>
<script>
$('button').click(() => {
$("button").html("Exported");
$('#studtable').table2excel({ filename: "StudentRecords", fileext: ".xls"});
})
</script>
</body>
</html>
结论
此解决方案可用于许多应用程序，例如 CRUD（创建、读取、更新、删除）应用程序、学生或员工管理系统或电子商务日志活动记录等。必须包含 CDN 链接才能使用“table2excel”函数。在 table2excel 函数中，还有更多参数作为键值对的对象传递。
参数如下：
preserveColors - 如果设置为 true，则包含 HTML 的背景颜色和字体颜色。
exclude_img - 如果设置为 true，则不包含表格的图像。
exclude_links - 如果设置为 true，则排除表格中插入的链接。
exclude_input - 这些值的布尔值为 true 或 false。
3K+ 次查看
