HTML表格数据导出为Excel文件的实现方法

2026-09-11 15:16:44 0 次阅读

HTML 表格中的数据经常需要进一步处理，例如生成报表、保存记录或交给其他人员继续编辑。直接让用户复制网页内容虽然简单，但容易出现格式错乱、数据遗漏等问题。将 HTML

中的数据导出为 Excel 文件，可以明显提升数据处理效率。

实现这一功能并不一定需要复杂的后端程序。对于数据量较小、结构比较简单的页面，可以直接使用 JavaScript 读取表格内容，并通过 Blob 生成可下载的文件。如果项目对 Excel 格式、单元格样式、公式、合并单元格等有更高要求，则可以使用专业的 Excel 处理库。

一、使用 JavaScript 导出 HTML 表格

HTML 页面准备一个普通表格，并增加一个导出按钮：

HTML
 id="dataTable" border="1">

姓名	年龄	城市	职位
张三	28	北京	工程师
李四	32	上海	产品经理
王五	26	广州	设计师



 onclick="exportExcel()">导出Excel

JavaScript 可以直接获取表格的 HTML 内容：

JavaScript
function exportExcel() {
    const table = document.getElementById("dataTable");

    const html = `
        
        
        ${table.outerHTML}
        
        
    `;

    const blob = new Blob([html], {
        type: "application/vnd.ms-excel"
    });

    const url = URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.download = "数据报表.xls";
    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

这种方式的核心思路比较简单：先获取

的完整 HTML，然后将 HTML 内容包装成 Blob，最后通过动态创建标签触发浏览器下载。

需要注意的是，这种方法生成的本质上是可以被 Excel 识别的 HTML 表格文件，文件扩展名通常使用 .xls，并不是真正意义上的 .xlsx Office Open XML 文件。

二、使用 Blob 导出表格时需要注意编码

中文数据是 HTML 表格导出中比较容易出现问题的地方。如果没有正确设置字符编码，打开文件后可能出现中文乱码。

推荐在生成内容时明确指定 UTF-8：

JavaScript
const html = `


${table.outerHTML}


`;

同时 Blob 的 MIME 类型可以设置为：

JavaScript
type: "application/vnd.ms-excel;charset=utf-8"

完整写法如下：

JavaScript
const blob = new Blob([html], {
    type: "application/vnd.ms-excel;charset=utf-8"
});

现代浏览器通常能够正确处理 UTF-8 内容，不过不同 Excel 版本以及不同操作系统环境仍可能存在兼容性差异。

三、只导出表格数据而不是整个页面

如果页面中的表格包含按钮、操作列等内容，直接导出 outerHTML 可能会把不需要的数据一起导出。

例如：

HTML
 id="dataTable">

姓名	年龄	操作
张三	28	编辑

如果不希望 Excel 中出现“操作”列，可以在导出之前创建一个临时表格，只复制需要的数据。

JavaScript
function exportExcel() {
    const sourceTable = document.getElementById("dataTable");
    const exportTable = sourceTable.cloneNode(true);

    const rows = exportTable.querySelectorAll("tr");

    rows.forEach(row => {
        const cells = row.querySelectorAll("th, td");

        if (cells.length > 0) {
            cells[cells.length - 1].remove();
        }
    });

    const html = `
        
        
        ${exportTable.outerHTML}
        
        
    `;

    const blob = new Blob([html], {
        type: "application/vnd.ms-excel;charset=utf-8"
    });

    const url = URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.download = "员工数据.xls";
    link.click();

    URL.revokeObjectURL(url);
}

实际项目中也可以通过给不需要导出的列增加特殊 class 来判断，而不是简单删除最后一列。例如：

HTML
 class="no-export">操作
 class="no-export">
    编辑

导出前执行：

JavaScript
exportTable.querySelectorAll(".no-export").forEach(element => {
    element.remove();
});

这种方案更加灵活。

四、使用 SheetJS 导出真正的 XLSX 文件

如果需求明确要求生成 .xlsx 文件，推荐使用 SheetJS 等专业库。

引入库：

HTML
 src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js">

页面中仍然使用普通 HTML 表格：

HTML
 id="dataTable">
    
        
            商品名称
            数量
            单价
        
    
    
        
            键盘
            10
            199
        
        
            鼠标
            20
            99
        
    


 id="exportBtn">导出Excel

JavaScript 代码可以写成：

JavaScript
document.getElementById("exportBtn").addEventListener("click", function () {
    const table = document.getElementById("dataTable");

    const workbook = XLSX.utils.table_to_book(table, {
        sheet: "数据"
    });

    XLSX.writeFile(workbook, "商品数据.xlsx");
});

table_to_book() 会直接读取 HTML 表格中的数据，并转换成工作簿。随后通过 writeFile() 生成 .xlsx 文件。

这种方式比简单修改文件扩展名更加规范，适合对 Excel 文件格式有明确要求的项目。

五、通过二维数组生成 Excel

有些情况下，页面上的数据并不是完全按照 HTML 表格结构保存的，而是来自接口返回的 JSON 数据。这时可以直接把数据转换成二维数组，再生成 Excel 工作表。

例如：

JavaScript
const data = [
    ["姓名", "年龄", "部门"],
    ["张三", 28, "技术部"],
    ["李四", 31, "产品部"],
    ["王五", 26, "设计部"]
];

const worksheet = XLSX.utils.aoa_to_sheet(data);

const workbook = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(
    workbook,
    worksheet,
    "员工信息"
);

XLSX.writeFile(workbook, "员工信息.xlsx");

其中：

JavaScript
XLSX.utils.aoa_to_sheet(data)

负责将二维数组转换成工作表。

而：

JavaScript
XLSX.utils.book_new()

创建一个新的工作簿。

最后：

JavaScript
XLSX.utils.book_append_sheet(workbook, worksheet, "员工信息");

将工作表添加到工作簿中。

这种方式特别适合前端项目中的接口数据导出，因为不需要先把 JSON 数据渲染到 HTML 表格，再从表格读取一次。

六、Vue项目中的HTML表格导出

Vue 项目通常可以直接通过 ref 获取表格元素，然后交给 Excel 库处理。

例如：

vue

    
         ref="tableRef">
            
                
                    姓名
                    年龄
                    部门
                
            
            
                 v-for="item in list" :key="item.id">
                    {{ item.name }}
                    {{ item.age }}
                    {{ item.department }}
                
            
        

         @click="exportExcel">导出Excel
    


 setup>
import * as XLSX from "xlsx";
import { ref } from "vue";

const tableRef = ref(null);

const list = ref([
    {
        id: 1,
        name: "张三",
        age: 28,
        department: "技术部"
    },
    {
        id: 2,
        name: "李四",
        age: 31,
        department: "产品部"
    }
]);

function exportExcel() {
    const workbook = XLSX.utils.table_to_book(
        tableRef.value,
        {
            sheet: "员工信息"
        }
    );

    XLSX.writeFile(workbook, "员工信息.xlsx");
}

如果使用 React，则可以通过 useRef 获取

元素，处理思路基本相同。

七、导出Excel时处理数字和日期

表格数据中经常同时包含字符串、数字和日期。例如：

JavaScript
const data = [
    ["商品", "数量", "价格", "日期"],
    ["键盘", 10, 199.5, "2026-08-29"],
    ["鼠标", 20, 99.9, "2026-08-29"]
];

如果所有内容都作为字符串写入 Excel，后续进行排序、求和等操作时可能受到影响。

例如：

JavaScript
const data = [
    ["商品", "数量", "价格"],
    ["键盘", 10, 199.5],
    ["鼠标", 20, 99.9]
];

其中 10 和 199.5 使用 JavaScript Number 类型保存，生成 Excel 后更容易被识别为数值。

对于金额、数量等字段，导出前应尽量保持正确的数据类型，而不要简单地把所有数据通过字符串拼接处理。

八、导出大量HTML表格数据时的注意事项

少量数据使用前端导出非常方便，但如果表格包含几万甚至几十万条记录，就需要考虑浏览器性能。

首先，页面上实际渲染的 HTML 行数越多，DOM 占用的内存越大。其次，Excel 工作簿生成本身也需要消耗浏览器 CPU 和内存。

对于大量数据，可以考虑直接使用接口返回的 JSON 数据生成工作表：

JavaScript
const response = await fetch("/api/users");
const list = await response.json();

const data = [
    ["姓名", "年龄", "部门"],
    ...list.map(item => [
        item.name,
        item.age,
        item.department
    ])
];

const worksheet = XLSX.utils.aoa_to_sheet(data);
const workbook = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(
    workbook,
    worksheet,
    "用户数据"
);

XLSX.writeFile(workbook, "用户数据.xlsx");

这样可以避免先把大量数据渲染成 HTML，再重新读取 DOM。

如果数据规模非常大，则更适合由服务器端生成 Excel 文件，前端只负责发起下载请求。这样能够降低浏览器压力，也更容易实现复杂的格式控制。

九、HTML表格导出Excel常见问题

1. 导出的文件打不开

如果使用 Blob 方案，首先检查文件内容是否符合 Excel 能够识别的 HTML 格式，同时确认文件扩展名与 MIME 类型是否匹配。

如果业务要求严格的 .xlsx 文件，建议直接使用支持 XLSX 格式的库，而不是把 HTML 内容保存为 .xlsx。

2. 中文出现乱码

重点检查字符编码：

HTML
 charset="UTF-8">

并确保 Blob 使用 UTF-8 编码声明：

JavaScript
const blob = new Blob([html], {
    type: "application/vnd.ms-excel;charset=utf-8"
});

3. Excel中出现网页上的按钮

这是因为导出了完整的 HTML 表格，而操作按钮也属于表格内容。可以使用 .no-export 等 class 标记需要排除的元素，在生成 Excel 前将其删除。

4. 样式没有完全保留

HTML 表格样式与 Excel 单元格样式并不是完全对应的。简单 Blob 方案对复杂 CSS 的支持尤其有限。

如果需要设置字体、边框、背景、数字格式、列宽、冻结窗格等 Excel 专属效果，应使用专门的 Excel 生成方案。

5. 导出的Excel只有当前页面的数据

如果页面使用分页组件，HTML 表格中通常只存在当前页的数据。因此调用 table_to_book() 时，也只能导出当前已经渲染到 DOM 中的数据。

如果要求“导出全部数据”，应该直接使用完整数据源生成 Excel，而不能依赖当前分页表格。

十、HTML表格导出Excel的方案选择

实际开发时，可以根据需求选择合适的方法。

实现方式	文件格式	优点	适用场景
Blob + HTML	`.xls`	实现简单、无需复杂依赖	简单数据导出
SheetJS读取Table	`.xlsx`	使用方便、格式规范	常规前端项目
SheetJS二维数组	`.xlsx`	数据控制灵活	接口数据导出
服务端生成	`.xlsx`等	适合大数据和复杂报表	企业级系统

如果只是临时导出一个简单 HTML 表格，Blob 方式已经足够。如果项目正式要求生成标准 Excel 文件，使用 XLSX 方案更加合适。如果数据量较大或者需要复杂报表，则应该考虑后端生成。

HTML 表格导出 Excel 的关键并不只是“让浏览器下载一个文件”，还要考虑数据类型、中文编码、分页数据、文件格式以及数据规模。简单场景可以采用 JavaScript + Blob 快速完成，标准 .xlsx 文件则可以借助 Excel 处理库实现，而大数据量和复杂报表更适合交给服务端处理。根据实际业务选择合适的导出方式，既能保证开发效率，也能减少后期出现文件兼容性和性能问题的概率。

文章标签