javascript如何将网页表格转成Excel-前端问答-PHP中文网

javascript如何将网页表格转成Excel

PHPz

发布： 2023-04-24 15:49:56

原创

1813人浏览过

随着电子表格在商务管理和数据分析中的广泛应用，将网页表格转换成excel格式的需求也越来越高。而javascript的功能强大和可跨平台特点，使其成为实现此功能的最佳选择。下面就介绍一种利用javascript实现将网页表格转换成excel的方法。

1.引入JavaScript库

首先需要引入必要的JavaScript库——SheetJS和FileSaver。SheetJS是一个强大的电子表格处理库，它可以读写Excel、CSV和其他电子表格格式。FileSaver库则提供了一种简单的方式来保存从浏览器中生成的HTML或二进制数据。在HTML文件中加入以下代码引入这两个库。

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

登录后复制

2.创建表格HTML代码

接下来需要在HTML页面中创建一个表格用于展示数据。这里我们创建一个包含表头和数据的简单表格。

立即学习“Java免费学习笔记（深入）”；

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>40</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

登录后复制

3.编写JavaScript代码

现在我们开始编写JavaScript代码，实现将表格转换成Excel的功能。

首先需要获取表格，使用document.getElementById()方法获取id为“table”的表格元素。

const table = document.getElementById('table');

登录后复制

然后通过table.rows获取表格中的行数和列数，创建一个空数组用于保存表格数据。

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

登录后复制

接着需要遍历表格中的所有行和列，将单元格的文本数据存入data数组中。这里使用双重循环来实现。

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

登录后复制

最后使用SheetJS库将data转换成Excel格式的二进制数据，并使用FileSaver库将其保存到本地。这里使用SheetJS的XLSX.writeFile()方法实现。

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

登录后复制

完整的JavaScript代码如下：

const table = document.getElementById('table');
const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

登录后复制

4.测试转换结果

完成以上步骤后，在浏览器中打开HTML文件，点击按钮，将会自动下载一个名为“table.xlsx”的Excel文件。

通过上述步骤，我们已经成功地将网页表格转换成了Excel格式。这种方法基于JavaScript，实现简单，效率高，且可跨平台，非常适用于将网页表格进行批量处理的情况，对于商务管理人员和数据分析师来说，无疑是一个很好的工具。

以上就是javascript如何将网页表格转成Excel的详细内容，更多请关注php中文网其它相关文章！