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

9 次阅读

HTML 页面中的表格经常用于展示订单、用户、统计数据等业务信息。当数据量较大时，仅在浏览器中查看并不方便，很多场景还需要将表格保存下来进行二次编辑、统计或打印。将 HTML 表格导出为 Excel 文件，是前端开发中比较常见的需求。

根据项目复杂程度，可以采用原生 JavaScript、Blob、SheetJS 等方式实现。其中，简单表格可以直接利用浏览器提供的能力完成导出；如果涉及多个工作表、单元格合并、复杂样式或大量数据，则更适合使用专业的 Excel 处理库。

一、使用原生 JavaScript 导出 HTML 表格

对于结构比较简单的

，可以直接将 HTML 表格内容转换为 Excel 可识别的数据格式，再通过 Blob 创建文件并触发下载。

例如页面中存在如下表格：

HTML
 id="dataTable" border="1">
姓名年龄部门
张三28技术部
李四32产品部
王五26运营部
onclick="exportExcel()">导出Excel

JavaScript 可以这样处理：

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);
}

这种方式的核心思路并不是生成真正的 XLSX 二进制文件，而是将 HTML 表格封装成 Excel 能够识别的内容，然后使用 .xls 扩展名进行下载。

对于内部管理系统、简单数据列表等场景，这种方案代码量很少，使用起来比较方便。

二、直接将表格转换为 Blob 文件

如果不需要额外的 Excel XML 声明，也可以使用更加简单的实现方式：

JavaScript
function exportTableToExcel() {
    const table = document.getElementById('dataTable');

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

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

    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = '表格数据.xls';
    a.click();

    URL.revokeObjectURL(url);
}

这种方式特别适合快速实现“点击按钮导出当前表格”的功能。

不过需要注意，.xls 并不意味着真正生成了传统 Excel 二进制格式。实际上文件内容仍然是 HTML，因此这种方法更适合简单场景，而不适合作为复杂 Excel 文件生成方案。

三、使用 SheetJS 导出真正的 Excel 文件

如果项目对 Excel 导出的要求较高，推荐使用 SheetJS。它能够将 HTML 表格转换为工作簿，并进一步生成 XLSX 文件。

首先引入 SheetJS：

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

页面中准备一个 HTML 表格：

HTML
 id="dataTable">
    
        编号
        商品名称
        数量
        价格
    
    
        1001
        机械键盘
        10
        299
    
    
        1002
        无线鼠标
        20
        129
    


 onclick="exportExcel()">导出Excel

然后通过 table_to_sheet 将 HTML 表格转换成工作表：

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

    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.table_to_sheet(table);

    XLSX.utils.book_append_sheet(workbook, worksheet, '商品数据');

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

执行后，浏览器会下载一个 商品数据.xlsx 文件。

这种方案相比直接修改文件扩展名更加规范，因为生成的是标准 XLSX 工作簿。

四、指定 Excel 工作表名称

实际项目中，一个 Excel 文件可能需要包含明确的工作表名称。

例如：

JavaScript
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.table_to_sheet(
    document.getElementById('dataTable')
);

XLSX.utils.book_append_sheet(
    workbook,
    worksheet,
    '销售数据'
);

XLSX.writeFile(workbook, '销售报表.xlsx');

这里的 销售数据 就是 Excel 打开后显示的 Sheet 名称。

如果名称来自用户输入，需要注意 Excel 工作表名称存在长度和特殊字符限制，因此实际开发时最好进行必要的清洗。

五、不直接导出页面上的所有内容

有些页面中的表格包含操作列，例如：

HTML
 id="dataTable">
    
        姓名
        部门
        操作
    
    
        张三
        技术部
        
            编辑
            删除

如果直接调用：

JavaScript
XLSX.utils.table_to_sheet(table);

那么“操作”这一列也可能被导出。

如果希望 Excel 中不包含操作列，更推荐从业务数据重新构造一个用于导出的数组，而不是直接读取页面 DOM。

例如：

JavaScript
const data = [
    ['姓名', '部门'],
    ['张三', '技术部'],
    ['李四', '产品部'],
    ['王五', '运营部']
];

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');

这种方式能够让页面展示数据和 Excel 导出数据相互独立，也更容易控制导出字段。

六、使用 JSON 数据导出 Excel

如果项目本身使用 Vue、React 或其他前端框架，表格数据通常已经存在于 JavaScript 数组中。

例如：

JavaScript
const users = [
    {
        name: '张三',
        age: 28,
        department: '技术部'
    },
    {
        name: '李四',
        age: 32,
        department: '产品部'
    },
    {
        name: '王五',
        age: 26,
        department: '运营部'
    }
];

可以直接通过 json_to_sheet 生成工作表：

JavaScript
const worksheet = XLSX.utils.json_to_sheet(users);

const workbook = XLSX.utils.book_new();

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

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

生成的 Excel 会自动使用对象属性作为表头。

如果希望修改 Excel 表头，可以先转换字段：

JavaScript
const data = users.map(item => ({
    '姓名': item.name,
    '年龄': item.age,
    '所属部门': item.department
}));

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

const workbook = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(
    workbook,
    worksheet,
    '用户信息'
);

XLSX.writeFile(workbook, '用户信息.xlsx');

对于前端管理后台来说，这通常比直接读取 HTML 表格更加合理。

七、处理中文乱码问题

HTML 表格导出 Excel 时，中文乱码是比较常见的问题。

如果采用 Blob 方式导出 HTML，建议明确设置 UTF-8：

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

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

如果使用 SheetJS 生成 XLSX，则通常不需要额外处理中文编码：

JavaScript
XLSX.writeFile(workbook, '中文数据.xlsx');

对于包含中文内容的项目，使用标准 XLSX 生成方案通常更加稳定。

八、设置 Excel 中的列宽

如果数据导出后列宽完全依赖 Excel 默认值，部分内容可能显示不完整。

SheetJS 可以通过 !cols 设置列宽：

JavaScript
worksheet['!cols'] = [
    { wch: 15 },
    { wch: 25 },
    { wch: 12 },
    { wch: 18 }
];

例如：

JavaScript
const worksheet = XLSX.utils.json_to_sheet(data);

worksheet['!cols'] = [
    { wch: 15 },
    { wch: 25 },
    { wch: 12 }
];

const workbook = XLSX.utils.book_new();

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

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

其中 wch 可以理解为列宽字符数。

九、HTML表格导出Excel时需要注意的问题

HTML 表格导出 Excel 看起来比较简单，但实际项目中有几个问题值得提前考虑。

首先是数据量。几百行数据通常问题不大，但如果一次性导出几十万条记录，直接在浏览器中生成 Excel 可能占用大量内存，甚至导致页面卡顿。这种情况下，更适合由后端生成 Excel 文件，然后前端负责下载。

其次是格式兼容性。简单的 HTML 转 .xls 方案依赖 Excel 对 HTML 格式的兼容能力，不同软件打开时可能存在表现差异。如果需要稳定的 XLSX 文件，建议使用专门的 Excel 库。

再次是单元格数据类型。身份证号码、手机号、订单编号等数据不能简单按照普通数字处理，否则 Excel 可能自动进行科学计数法转换，甚至丢失前导零。

例如：

001234567890

如果被 Excel 当作普通数字处理，可能变成：

1234567890

对于这类数据，导出时应根据业务要求将其作为字符串处理。

最后还需要关注前端性能。导出操作本质上属于数据处理过程，如果数据量比较大，可以在点击导出时增加加载状态，避免用户误以为页面没有响应。

十、原生方案与 SheetJS 方案如何选择

两种方式各有适用场景。

原生 JavaScript + Blob 的方案实现简单，不需要额外引入依赖，适合：

SheetJS 更适合：

如果只是后台页面中增加一个简单的“导出 Excel”按钮，原生方案已经足够。如果导出功能属于系统核心功能，则建议从数据结构层面设计，而不是长期依赖 HTML 表格转换。

十一、完整的 SheetJS 导出示例

结合实际开发需求，可以将导出逻辑封装成一个通用方法：

JavaScript
function exportTableToExcel(tableId, fileName, sheetName) {
    const table = document.getElementById(tableId);

    if (!table) {
        console.error('未找到指定的HTML表格');
        return;
    }

    const worksheet = XLSX.utils.table_to_sheet(table);

    const workbook = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(
        workbook,
        worksheet,
        sheetName || 'Sheet1'
    );

    XLSX.writeFile(
        workbook,
        fileName || '数据.xlsx'
    );
}

调用：

JavaScript
exportTableToExcel(
    'dataTable',
    '员工信息.xlsx',
    '员工数据'
);

这样就可以将具体的表格 ID、文件名和 Sheet 名称参数化，方便在多个页面复用。

对于更加复杂的项目，还可以继续增加列过滤、数据格式转换、文件名动态生成以及权限控制等功能。

HTML 表格导出 Excel 的实现方式并不只有一种。简单场景可以利用 Blob 将 HTML 内容转换为 .xls 文件，而需要标准 XLSX、数据类型控制和更多 Excel 功能时，则更适合使用 SheetJS 等专业方案。实际选择时，应结合数据规模、文件格式要求、浏览器性能以及项目维护成本综合判断。

文章标签
HTML Excel导出 JavaScript SheetJS 前端开发