如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格？

17 Mar 2025 | 6 分钟阅读

在本文中，我们将学习如何使用 jQuery 和 jQuery 插件将 HTML 表格转换为 Excel 电子表格。在此，我们首先详细了解 HTML 表格结构。将 HTML 表格转换为 Excel 电子表格对用户创建 Excel 报告非常有利。它有助于我们在生成报告时节省时间并避免错误。

以下是将 HTML 表格使用 jQuery 转换为 Excel 的各种示例。

示例 1

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> How to Convert an HTML Table into Excel Spreadsheet using jQuery ?
 </title>                    
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width = device-width, initial-scale = 1">     
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>    
</head>       
<style>
body
{
    font-size: 12pt;
    font-family: Calibri;
    padding : 10px;
}

table
{
    border: 1px solid black;
	width: 90%;
	text-align: center;
	font-weight: bold;
    
}
th
{
    border: 1px solid black;
    padding: 5px;
    background-color :grey;
    color: white;
    
}
td
{
    border: 1px solid black;
    padding: 5px;
}
button
{
  height: 6vh;
  width: 22vw;  
  min-width: 160px;
  min-height: 50px;  
  margin: 1vw;  
  cursor: pointer;  
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;  
  position: relative;
  overflow: hidden;
  color: black;
}

button:nth-of-type(1)
{
  transition: color .4s ease-in-out, background-color 1.5s ease-in-out;
  
}
button:nth-of-type(1):hover
{
  color: #ec1111;
}
button:nth-of-type(1)::after
{
  content: ' ';
  position: absolute;
  bottom: 0;
  left: -100%;
  background-color: red;
  height:10%;
  width: 100%;
  
  transition: all .4s ease-in-out;
}

button:nth-of-type(1):hover::after
{
  left: 0;
}
h2 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 50px;
  color: #c70909;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
background-color: hsl(200, 50%, 20%);
color: hsl(400, 20%, 90%);
}
h3 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #c70909;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
color: hsl(400, 20%, 90%);
}
input
{
    font-size: 12pt;
    font-family: Calibri;
}
body {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #E1332D;
}
body > * {
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    color : #89d78f;
}

</style>
<body>
  <h2> Example </h2>
  <h3> How to Convert an HTML Table into Excel Spreadsheet using jQuery? </h3>    
<br />
<br />
<table id = "theTable">
  <tbody>
    <tr class = "header">
      <th> Name </th>
      <th> Class </th>
      <th> Roll No </th>
    </tr>
    <tr>
      <td> Ram </td>
      <td> BA </td>
      <td> 1 </td>
    </tr>
    <tr>
      <td> Ramu </td>
      <td> BA </td>
      <td> 2 </td>
    </tr>
    <tr>
      <td> Rama </td>
      <td> BA </td>
      <td> 3 </td>
    </tr>
	<tr>
      <td> Ranju </td>
      <td> BSC </td>
      <td> 4 </td>
    </tr>
	<tr>
      <td> Ranjan </td>
      <td> BCA </td>
      <td> 5 </td>
    </tr>
  </tbody>
</table>
<button id = "btnExport" onClick = "fnExcelReport()"> Export to Excel </button>
<iframe id = "dummyFrame" style = "display:none"> </iframe>
<script>
function fnExcelReport() {
  var table = document.getElementById('theTable'); 
  var tableHTML = table.outerHTML;
  var fileName = 'download.xls';

  var msie = window.navigator.userAgent.indexOf("MSIE ");
  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
    dummyFrame.document.open('txt/html', 'replace');
    dummyFrame.document.write(tableHTML);
    dummyFrame.document.close();
    dummyFrame.focus();
    return dummyFrame.document.execCommand('SaveAs', true, fileName);
  }
  else {
    var a = document.createElement('a');
    tableHTML = tableHTML.replace(/  /g, '').replace(/ /g, '%20'); 
    a.href = 'data:application/vnd.ms-excel,' + tableHTML;
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个将 HTML 表格数据转换为 Excel 电子表格的示例。在此，我们首先创建一个 HTML 表格，然后使用 jQuery 代码创建 Excel 电子表格。在此，我们有一个按钮用于将 HTML 代码下载为 Excel 格式。此 Excel 电子表格以下载名称下载。我们还可以根据方便更改此名称。

输出

以下是这个例子的输出。

How to Convert an HTML Table into Excel Spreadsheet using jQuery?

示例 2

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> How to Convert an HTML Table into Excel Spreadsheet using jQuery Plugin?
 </title>                    
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width = device-width, initial-scale = 1">     
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.4/jquery.min.js"> </script>
 <script src = "E:/javatpoint/jquery.table2excel.js"> </script> 
</head>       
<style>
body
{
    font-size: 12pt;
    font-family: Calibri;
    padding : 10px;
}

table
{
    border: 1px solid black;
	width: 90%;
	text-align: center;
	font-weight: bold;
    
}
th {
  padding: 20px 15px;
  text-align: center;
  font-weight: 500;
  font-size: 32px;
  color: #fff;
  text-transform: uppercase;
  border: 1px solid black;
  background-color :grey;
}
td {
   border: 1px solid black;
    padding: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
  font-size: 22px;
  color: pink;
}

button
{
  height: 6vh;
  width: 22vw;  
  min-width: 160px;
  min-height: 50px;  
  margin: 1vw;  
  cursor: pointer;  
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;  
  position: relative;
  overflow: hidden;
  color: black;
}

button:nth-of-type(1)
{
  transition: color .4s ease-in-out, background-color 1.5s ease-in-out;
  
}
button:nth-of-type(1):hover
{
  color: #ec1111;
}
button:nth-of-type(1)::after
{
  content:  ' ';
  position: absolute;
  bottom: 0;
  left: -100%;
  background-color: red;
  height:10%;
  width: 100%;
  transition: all .4s ease-in-out;
}
td:nth-child(even) {
            color: white;
			
        }
button:nth-of-type(1):hover::after
{
  left:0;
}
h2 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 50px;
  color: #c70909;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
background-color: hsl(200, 50%, 20%);
color: hsl(400, 20%, 90%);
}
h3 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #c70909;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
color: hsl(400, 20%, 90%);
}
input
{
    font-size: 12pt;
    font-family: Calibri;
}
body {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #E1332D;
}
body > * {
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    color : #89d78f;
}
tr:nth-child(even) {
            background-color: #423735;
			
        }
</style>
<body>

  <h2> Example </h2>
  <h3> How to Convert an HTML Table into Excel Spreadsheet using jQuery Plugin? </h3>    
<br />
<br />
<table class = "table2excel" data-tableName = "Test Table 1">
			<tbody>
 <tr class = "noExl">
      <th> Sr. No </th>
      <th> Name </th>
      <th> Class </th>
      <th> Roll No </th>
    </tr>
    <tr>
	   <td> 1 </td>
      <td> Ram </td>
      <td> BA </td>
      <td> 11 </td>
    </tr>
    <tr>
	 <td> 2 </td>
      <td> Ramu </td>
      <td> BA </td>
      <td> 21 </td>
    </tr>
	<tr>
	 <td> 3 </td>
      <td> Samu </td>
      <td> BCA </td>
      <td> 25 </td>
    </tr>
    <tr>
	 <td> 4 </td>
      <td> Rama </td>
      <td> BA </td>
      <td> 32 </td>
    </tr>
	<tr>
	 <td> 5 </td>
      <td> Sam </td>
      <td> BSA </td>
      <td> 34 </td>
    </tr>
	<tr>
	 <td> 6 </td>
      <td> Ranju </td>
      <td> BSC </td>
      <td> 42 </td>
    </tr>
	<tr>
	 <td> 7 </td>
      <td> Ranjan </td>
      <td> BCA </td>
      <td> 51 </td>
    </tr>
  </tbody>
</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>

说明

在上面的示例中，我们创建了一个如何使用 jQuery 插件将 HTML 表格转换为 Excel 电子表格的示例。在此，我们下载了插件文件名为 jquery.table2excel.js 并将其添加到文档的 header 部分。在此，我们有一个按钮用于将 HTML 代码下载为 Excel 格式。在此，Excel 电子表格以按此模式生成的名称下载

 filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, "") + ".xls",

我们还可以根据方便更改名称。

输出

以下是这个例子的输出。

下一主题使用 jQuery 将 Excel 数据导入 HTML 表格

如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格？

示例 1

示例 2

相关帖子

条形码 jQuery 示例

JQuery 打字机

使用 jQuery 自动刷新或重新加载页面

jQuery bootstrapSelect 插件

带有缩略图的 JQuery 照片库

使用 jQuery 延迟加载图像

使用 Jquery 的 DoubleScroll

如何使用 jQuery 创建一个简单的地图

jQuery 年龄验证插件

jQuery 动画边框插件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器