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

htmljqueryweb developmentfront end technology更新于 2024/1/25 0:12:17

概述

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

语法

此处使用的语法为 -

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

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

方法

为了将表格转换为 Excel 工作表，我们需要在 HTML 页面中添加一些内容分发网络 (CDN) 链接 −

jQuery CDN

<script src="//ajax.googleapis.com/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 的内容分发网络 (CDN) 和 jQuery 插件"table2excel"添加到 HTML 页面的 head 标签中。
步骤 4 − 创建 <script>在 body 标签末尾添加一个标签，选择一个选择器作为"button"，并添加一个点击函数作为 jQuery 语法，这将触发箭头函数。
步骤 5 - 在箭头函数内部，通过 table 标签内给定的 id 选择表格作为选择器，并使用"table2excel"函数。在此函数中传递两个参数作为文件名:"Write your filename"和文件扩展名:".xls"。
步骤 6 - 点击按钮后，将触发 table2excel 函数并下载一个 .xls 文件。

示例

在此示例中，我们创建了一个 HTML 表作为学生记录，以表格格式存储学生记录，学生信息包括学生姓名、所在科系、学号和出生日期。因此，只需单击导出按钮，表格就会转换为 Excel 文件并自动下载。

<html>
<head>
   <script src="//ajax.googleapis.com/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>