本教程详细介绍了将前端HTML表格数据导出到Excel文件的两种实用方法。首先，我们将探讨如何利用功能强大的Datatables插件实现带有丰富格式和多种导出选项的高级导出。其次，我们将提供一个简洁的原生JavaScript函数，通过数据URI方案实现快速简单的Excel导出，并深入解析其工作原理和使用场景。
在现代Web应用开发中，将前端展示的HTML表格数据导出为Excel文件是一个常见的需求，尤其在报表或数据管理系统中。本文将介绍两种实现此功能的方法：一种是利用成熟的第三方插件Datatables，适用于需要高级功能和良好用户体验的场景；另一种是使用原生JavaScript，适用于快速实现基本导出功能的场景。
方法一：使用Datatables插件实现高级导出
Datatables是一个功能强大的jQuery表格插件，它不仅能增强HTML表格的交互性，还通过其扩展插件提供了数据导出功能，包括导出到Excel、PDF和CSV等格式。这种方法尤其适合那些已经在使用Datatables，或需要更复杂导出选项（如保留格式、选择列、多工作表等）的项目。
1. Datatables Buttons扩展介绍
Datatables的导出功能主要由其“Buttons”扩展提供。该扩展允许开发者轻松地在表格上方或下方添加各种功能按钮，其中就包括HTML5导出按钮。
立即学习“前端免费学习笔记（深入）”；
2. 实现步骤概述
要使用Datatables进行导出，通常需要遵循以下步骤：
- 引入库文件： 在项目中引入jQuery、Datatables核心JS/CSS文件，以及Datatables Buttons扩展的JS/CSS文件和HTML5导出所需的JSZip、pdfmake（用于PDF导出）等库。
- 初始化Datatables： 将你的HTML表格初始化为Datatables实例。
- 配置导出按钮： 在Datatables的配置选项中，通过dom和buttons属性来定义导出按钮。
示例代码片段（概念性）：
<!DOCTYPE html>
<html>
<head>
<title>Datatables导出Excel示例</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>姓名</th>
<th>薪资</th>
<th>部门</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>5000</td>
<td>销售</td>
</tr>
<tr>
<td>李四</td>
<td>6500</td>
<td>技术</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable({
dom: 'Bfrtip', // B代表Buttons，将按钮添加到表格DOM中
buttons: [
{
extend: 'excelHtml5', // 导出为Excel
title: '薪资报表', // Excel文件标题
exportOptions: {
columns: ':visible' // 只导出可见列
}
},
'pdfHtml5', // 导出为PDF
'print' // 打印
]
});
});
</script>
</body>
</html>优点：
- 功能强大，支持多种导出格式。
- 可保留表格样式和复杂格式。
- 高度可配置，可选择导出列、自定义文件名称、添加标题等。
- 提供良好的用户体验。
缺点：
- 引入的库文件较多，增加了页面加载负担。
- 对于只需要简单导出的场景可能过于“重”。
方法二：采用原生JavaScript实现简单导出
对于不需要复杂格式或额外依赖的场景，我们可以利用原生JavaScript通过数据URI（Data URI）方案将HTML表格内容直接转换为Excel文件并触发下载。这种方法轻量、直接，易于理解和实现。
1. 工作原理
其核心思想是将HTML表格的完整内容（包括HTML标签）编码成一个数据URI，并指定MIME类型为application/vnd.ms-excel。然后，通过创建一个<a>标签，将其href属性设置为这个数据URI，并模拟点击下载。
2. 实现函数
以下是一个实现此功能的JavaScript函数：
/**
* 将HTML表格导出为Excel文件
* @param {HTMLElement} elem - 触发导出操作的DOM元素，通常是一个<a>标签
* @param {string} tableId - 要导出的HTML表格的ID
* @param {string} fileName - 导出的Excel文件的名称（不含扩展名）
* @returns {boolean} - 始终返回false，以阻止默认的链接跳转行为
*/
function exportHtmlTableToExcel(elem, tableId, fileName = "export") {
// 1. 获取要导出的HTML表格元素
const table = document.getElementById(tableId);
if (!table) {
console.error(`未找到ID为 "${tableId}" 的表格元素。`);
return false;
}
// 2. 获取表格的完整HTML内容
const html = table.outerHTML;
// 3. 构建数据URI
// 使用escape()函数对HTML内容进行编码，以确保特殊字符不会破坏URI
const url = 'data:application/vnd.ms-excel,' + encodeURIComponent(html);
// 4. 设置链接的属性以触发下载
elem.setAttribute("href", url);
elem.setAttribute("target", "_blank"); // 在新标签页中打开，通常用于下载
elem.setAttribute("download", `${fileName}.xls`); // 设置下载文件名
// 5. 返回false，阻止<a>标签的默认跳转行为
return false;
}3. 如何调用
在HTML中，你可以创建一个<a>标签，并通过onclick事件调用上述函数：
<!DOCTYPE html>
<html>
<head>
<title>原生JS导出Excel示例</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<h1>薪资明细</h1>
<table id="payrollTable">
<thead>
<tr>
<th>员工ID</th>
<th>姓名</th>
<th>基本工资</th>
<th>奖金</th>
<th>总计</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>王小明</td>
<td>8000</td>
<td>1500</td>
<td>9500</td>
</tr>
<tr>
<td>002</td>
<td>陈丽</td>
<td>7500</td>
<td>1200</td>
<td>8700</td>
</tr>
<tr>
<td>003</td>
<td>林大华</td>
<td>9000</td>
<td>2000</td>
<td>11000</td>
</tr>
</tbody>
</table>
<br>
<a href="#" onclick="return exportHtmlTableToExcel(this, 'payrollTable', '薪资报表');">导出薪资报表到Excel</a>
<script>
// 上面的 exportHtmlTableToExcel 函数定义放在这里
function exportHtmlTableToExcel(elem, tableId, fileName = "export") {
const table = document.getElementById(tableId);
if (!table) {
console.error(`未找到ID为 "${tableId}" 的表格元素。`);
return false;
}
const html = table.outerHTML;
const url = 'data:application/vnd.ms-excel,' + encodeURIComponent(html);
elem.setAttribute("href", url);
elem.setAttribute("target", "_blank");
elem.setAttribute("download", `${fileName}.xls`);
return false;
}
</script>
</body>
</html>优点：
- 无需引入任何第三方库，代码轻量。
- 实现简单，容易理解和维护。
- 适用于快速、基本的导出需求。
缺点：
- 导出的.xls文件实际上是一个HTML文件，只是被Excel软件识别并打开。因此，复杂的单元格格式、公式、图片等高级Excel特性无法通过这种方式直接保留。
- 浏览器兼容性：现代浏览器普遍支持，但某些旧版浏览器或特定安全设置可能存在问题。
- 文件大小限制：数据URI有长度限制，对于非常大的表格数据可能不适用。
- 导出的文件后缀通常为.xls，而不是更现代的.xlsx。
注意事项与总结
- 选择合适的方法： 如果你的项目已经使用了Datatables，或者需要保留复杂的表格样式、支持多种导出格式、提供更好的用户体验，那么Datatables是更好的选择。如果只是需要一个简单、快速、无依赖的HTML表格数据导出功能，原生JavaScript方法则更为合适。
- 格式保留： 原生JavaScript方法导出的Excel文件，其格式保留能力有限。它会尽量保留HTML表格的基本结构（行、列、文本），但复杂的CSS样式、合并单元格等可能无法完美转换。Datatables在这方面表现更优。
- 大数据量处理： 对于非常大的数据集，前端直接导出可能效率不高或存在浏览器性能问题。在这种情况下，通常建议采用后端生成Excel文件（如使用Apache POI、OpenPyXL等库）并提供下载链接的方式。
- 文件类型： 原生JS方法生成的是伪.xls文件（实际内容是HTML），而Datatables的Excel导出通常会生成真正的二进制.xlsx文件，具有更好的兼容性和功能支持。
通过上述两种方法，开发者可以根据项目需求和复杂程度，灵活选择合适的方案来实现HTML表格数据到Excel文件的导出功能。
