要使用 jQuery DataTable 插件实现将表格导出为 Excel 文件并下载,可以借助以下工具和方法:
DataTables
Buttons
Buttons 扩展提供了一些内置功能,可以轻松导出表格为 Excel 文件。
引入相关库 确保引入了以下脚本和样式:
html 复制代码<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
初始化 DataTable 并启用导出按钮
html 复制代码 <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <!-- 添加更多行 --> </tbody> </table>
<table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <!-- 添加更多行 --> </tbody> </table>
javascript 复制代码 $(document).ready(function () { $('#example').DataTable({ dom: 'Bfrtip', // 定义控件布局 buttons: [ { extend: 'excelHtml5', // 导出为Excel text: '导出Excel', // 按钮文本 title: '表格数据', // Excel文件名 exportOptions: { columns: ':visible' // 导出可见列 } } ] }); });
$(document).ready(function () { $('#example').DataTable({ dom: 'Bfrtip', // 定义控件布局 buttons: [ { extend: 'excelHtml5', // 导出为Excel text: '导出Excel', // 按钮文本 title: '表格数据', // Excel文件名 exportOptions: { columns: ':visible' // 导出可见列 } } ] }); });
运行效果 页面加载后,表格上方会显示一个 "导出Excel" 按钮,点击即可下载表格数据为 Excel 文件。
如果需要更灵活的导出功能(例如使用自定义格式或未使用 Buttons 扩展),可以结合 SheetJS 库:
SheetJS
引入 SheetJS
html 复制代码 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
实现导出逻辑
javascript 复制代码 function exportTableToExcel(tableId, fileName) { // 获取表格数据 const table = document.getElementById(tableId); const wb = XLSX.utils.table_to_book(table); // 将表格转换为工作簿 XLSX.writeFile(wb, fileName); // 导出为文件 } $(document).ready(function () { $('#example').DataTable(); // 绑定导出按钮 $('#exportExcel').on('click', function () { exportTableToExcel('example', '表格数据.xlsx'); }); });
function exportTableToExcel(tableId, fileName) { // 获取表格数据 const table = document.getElementById(tableId); const wb = XLSX.utils.table_to_book(table); // 将表格转换为工作簿 XLSX.writeFile(wb, fileName); // 导出为文件 } $(document).ready(function () { $('#example').DataTable(); // 绑定导出按钮 $('#exportExcel').on('click', function () { exportTableToExcel('example', '表格数据.xlsx'); }); });
HTML 中添加导出按钮
html 复制代码 <button id="exportExcel">导出为 Excel</button> <table id="example"> <thead> <tr> <th>列1</th> <th>列2</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody> </table>
<button id="exportExcel">导出为 Excel</button> <table id="example"> <thead> <tr> <th>列1</th> <th>列2</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody> </table>
选择具体方法可以根据项目需求和复杂性来定。
再次下载
iPhone浏览器用户: 1.点击手机桌面“文件”图标 2.在“下载”目录中查找