要将HTML表格数据导出为Excel,可以使用以下方法:
(图片来源网络,侵删)1、创建一个HTML文件,包含一个表格和一个按钮,点击按钮时,将触发导出功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>导出表格为Excel</title> </head> <body> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> <tr> <td>王五</td> <td>28</td> <td>深圳</td> </tr> </tbody> </table> <button onclick="exportToExcel()">导出为Excel</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script> <script src="main.js"></script> </body> </html>
2、接下来,创建一个名为main.js
的JavaScript文件,用于处理导出功能,在这个文件中,我们将使用xlsx
库来创建一个新的工作簿,并将表格数据写入工作表,我们将使用FileSaver.js
库来保存工作簿为Excel文件。
确保在HTML文件中引入xlsx.full.min.js
和FileSaver.js
库。
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
在main.js
文件中编写以下代码:
function exportToExcel() { // 获取表格数据 const table = document.getElementById("myTable"); const rows = table.getElementsByTagName("tr"); let data = []; for (let i = 1; i < rows.length; i++) { const cells = rows[i].getElementsByTagName("td"); let rowData = []; for (let j = 0; j < cells.length; j++) { rowData.push(cells[j].innerText); } data.push(rowData); } // 创建新的工作簿 const wb = XLSX.utils.book_new(); const ws = XLSX.utils.json_to_sheet(data); // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 将工作簿转换为二进制字符串 const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" }); // 使用FileSaver.js保存工作簿为Excel文件 saveAs(new Blob([s2ab(wbout)], { type: "application/octetstream" }), "导出的数据.xlsx"); } function s2ab(s) { const buf = new ArrayBuffer(s.length); const view = new Uint8Array(buf); for (let i = 0; i < s.length; i++) { view[i] = s.charCodeAt(i) & 0xFF; } return buf; }
现在,当用户点击“导出为Excel”按钮时,表格数据将被导出为名为“导出的数据.xlsx”的Excel文件。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。