首页　>　文章列表　>　如何使用jQuery将HTML表格转换为Excel电子表格？

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

jquery HTML表格 Excel电子表格
431 2023-09-18

概述

将HTML表格转换为Excel电子表格可以借助jQuery插件完成。"table2excel"是一个轻量级的jQuery插件，可以帮助解决这个问题。在这里，我们将使用HTML的<table>标签创建一个表格，在表格中使用<tr>标签创建多行。数据将使用<td>标签插入到行中。

语法

在这个中使用的语法是−

$(selector).table2excel({
   filename: “”,
   fileext: “”
});

选择器 - 它可以是任何HTML表格标签，类或id。
table2excel − 这是一个将HTML表格转换的函数。它包含一些参数，如文件名、文件扩展名等。

方法

要将表格转换为Excel表格，我们将在我们的HTML页面中添加一些内容传递网络（CDN）链接 -

jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

table2excel插件CDN

<script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

算法

步骤 1 - 使用<table>标签创建一个HTML表格，使用<tr>标签向表格添加行，使用<td>标签向表格行插入数据。
第二步 - 使用<button>标签创建一个HTML按钮，该按钮将用于将表格导出到Excel电子表格。
步骤 3 - 将jQuery和jQuery插件“table2excel”的内容传递网络（CDN）添加到HTML页面的head标签中。
步骤 4 - 在 body 标签的末尾创建 <script> 标签，选择一个选择器为“button”，并添加点击函数作为 jQuery 语法，该函数将触发一个箭头函数。
第五步 - 在箭头函数内部，通过给定的id选择器在table标签内选择表格，并使用“table2excel”函数。在此函数内部，传入两个参数作为文件名：filename: “编写您的文件名”和fileext: “.xls”。
第6步 - 点击按钮将触发table2excel函数，并下载一个.xls文件。

Example

的中文翻译为：

示例

在这个例子中，我们创建了一个HTML表格，作为学生记录，它以表格的形式存储学生的记录，学生信息包括学生姓名、分支、学号和出生日期。因此，简单来说，点击导出按钮后，表格将被转换为Excel文件并自动下载。

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="https://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>