前端HTML表格数据导出Excel：两种实用方法-html教程-PHP中文网

前端HTML表格数据导出Excel：两种实用方法

碧海醫心

发布： 2025-12-02 11:03:06

原创

402人浏览过

前端html表格数据导出excel：两种实用方法

本教程详细介绍了将前端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>

登录后复制

优点：

功能强大，支持多种导出格式。
可保留表格样式和复杂格式。
高度可配置，可选择导出列、自定义文件名称、添加标题等。
提供良好的用户体验。

缺点：

Replit Ghostwrite

一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。

查看详情

引入的库文件较多，增加了页面加载负担。
对于只需要简单导出的场景可能过于“重”。

方法二：采用原生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文件的导出功能。

以上就是前端HTML表格数据导出Excel：两种实用方法的详细内容，更多请关注php中文网其它相关文章！