返回

技术剖析：前端轻松实现table导出excel

前端

工作中经常会遇到要将页面table导出为excel的需求，常见的解决方法有两种：

  1. 将table的DOM元素遍历后导出excel。
  2. 整理好要导出的table数据，然后导出excel。

方案一：DOM遍历法
这种方案的原理很简单，就是使用JavaScript遍历table的DOM元素，然后将每个单元格的内容提取出来，最后拼凑成一个excel文件。这种方案的优点是简单易懂，缺点是效率较低，尤其是当table的数据量很大时。

方案二：组织数据导出法
这种方案的原理是先将table的数据整理成JSON格式，然后使用第三方库（如TableExport）将JSON数据导出为excel。这种方案的优点是效率高，缺点是需要使用第三方库。

推荐方案：方案二
经过比较，方案二更加高效和稳定，因此推荐使用方案二。

下面是方案二的详细步骤：

1. 组织要导出的JSON数据
首先需要将table的数据整理成JSON格式。可以先定义一个变量，如：

let data = [];

然后使用JavaScript遍历table的DOM元素，并将每个单元格的内容提取出来，并添加到data数组中。例如：

let table = document.getElementById("myTable");
for (let i = 0; i < table.rows.length; i++) {
  let rowData = [];
  for (let j = 0; j < table.rows[i].cells.length; j++) {
    rowData.push(table.rows[i].cells[j].innerHTML);
  }
  data.push(rowData);
}

2. 使用TableExport插件导出excel
整理好JSON数据后，就可以使用TableExport插件将JSON数据导出为excel。TableExport是一个功能强大的JavaScript库，可以轻松地将table的数据导出为excel。

使用TableExport插件导出excel的步骤如下：

  1. 引入TableExport插件的JavaScript文件和CSS文件。
  2. 在页面中创建一个table元素，并将要导出的数据填充到table中。
  3. 初始化TableExport插件。
  4. 调用TableExport插件的export方法，将table的数据导出为excel。
let table = document.getElementById("myTable");
let exporter = new TableExport(table);
exporter.export();

总结

本文介绍了两种将table导出为excel的方案，并推荐使用第二种方案。第二种方案的效率更高，并且可以轻松地使用第三方库（如TableExport）来导出excel。