資料結構
網路
關係資料庫管理系統 (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.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 和 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.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>
結論
此解決方案可用於許多應用程式，例如 CRUD（建立、讀取、更新、刪除）應用程式、學生或員工管理系統或電子商務日誌活動記錄等。必須包含 CDN 連結才能使用“table2excel”函式。在 table2excel 函式中，還有更多引數作為鍵值對的物件傳遞。
引數如下：
preserveColors - 如果設定為 true，則包含 HTML 的背景顏色和字型顏色。
exclude_img - 如果設定為 true，則不包含表格的影像。
exclude_links - 如果設定為 true，則排除表格中插入的連結。
exclude_input - 這些值的布林值為 true 或 false。
3K+ 次檢視
