极客教程如何使用jQuery将HTML表格转换成Excel电子表格
你创建的任何HTML表格都可以通过jQuery转换为Excel电子表格，而且与所有浏览器兼容。有两种简单的方法，需要基本的HTML和jQuery知识来实现。
- 方法1：使用jQuery插件。一个简单的jQuery插件’table2excel’可以用来将HTML表格转换为excel表格。
语法:
$("#table-id").table2excel({
filename: "excel_sheet-name.xls"
});
- 示例:
<table id="studtable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alex</td>
<td>15</td>
<td>Maldives</td>
</tr>
<tr>
<td>102</td>
<td>Chris</td>
<td>14</td>
<td>Canada</td>
</tr>
<tr>
<td>103</td>
<td>Jay</td>
<td>15</td>
<td>Toronto</td>
</tr>
</table>
<script>
(document).ready(function () {
("#studtable").table2excel({
filename: "Students.xls"
});
});
</script>
- 输出:
ID Name Age Address
101 Alex 15 Maldives
102 Chris 14 Canada
103 Jay 15 Toronto
- 上述输出被转换为Excel电子表格，与HTML表格的方式完全相同。关于’table2excel’。table2excel’是一个简单而有用的jQuery插件，可以将HTML表格数据导出到Excel文件中。table2excel’也有一个功能，可以排除包含指定类别的单元格。noExport的语法。
$(document).ready(function() {
$("#table-id").table2excel({
exclude: ".noExport",
filename: "name-of-the-file",
});
});
- 排除某些指定单元格的代码示例。
<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>
<button>Export</button>
<table>
<thead>
<tr>
<td class="noExport">
This cell will not be exported.
</td>
<td>
This cell will get exported.
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
<td class="noExport">Maldives</td>
</tr>
<tr>
<td>Chris</td>
<td>Canada</td>
</tr>
</tbody>
</table>
- 注意：在上面的示例代码中，’.noExport’类已经被用来从HTML表格数据中排除那些指定的单元格。因此，导出的Excel电子表格也不包括HTML表格数据中的那些单元格。
- 方法2：使用简单的HTML。考虑到上面的同一个学生表来理解下面的内容。让我们在代码中使用一个按钮，当点击该按钮时，将HTML数据表转换为Excel表格。请注意，下面的 “导出 “按钮实际上并没有将HTML表格转换为Excel表格。这必须在一个适当的、已经存在的HTML代码中使用，以获得Excel电子表格，在这个IDE中是不起作用的。_
<!DOCTYPE html>
<html>
<head>
<title>
HTML Table To Excel
spreadsheet using
HTML only
</title>
</head>
<body>
<table id="studtable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alex</td>
<td>15</td>
<td>Maldives</td>
</tr>
<tr>
<td>102</td>
<td>Chris</td>
<td>14</td>
<td>Canada</td>
</tr>
<tr>
<td>103</td>
<td>Jay</td>
<td>15</td>
<td>Toronto</td>
</tr>
</table>
<button onclick="tableToExcel(
'studtable', 'Students')">
Click to Export
</button>
</body>
</html>
- 输出:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。