JavaScript 导出 HTML 表格到 Excel 并自定义文件名

心靈之曲

发布时间：2025-09-14 20:59:00

955人浏览过

来源于php中文网

原创

javascript 导出 html 表格到 excel 并自定义文件名

第一段引用上面的摘要：

本文档旨在提供一个使用 JavaScript 将 HTML 表格导出为 Excel 文件，并允许用户自定义文件名的解决方案。通过修改现有的 tableToExcel 函数，我们可以创建一个可复用的方法，方便地将网页上的表格数据导出为 Excel 格式，并根据需要设置不同的文件名，避免默认的 "download.xls" 命名。

实现方法

核心在于修改原有的 tableToExcel 函数，使其创建一个标签，并将数据 URI 设置为 href 属性，同时设置 download 属性为期望的文件名。通过程序触发该链接的点击事件，从而实现下载。

以下是修改后的 tableToExcel 函数：

立即学习“Java免费学习笔记（深入）”；

SeoShop

SeoShop网店系统全站纯静态html生成更符合搜索引擎优化，并修改了以前许多js代码，取消了连接地址的js代码更换为纯div+css格式，并且所有文件可自定义url和文件名，自定义内部连接，自定义外部连接，等多个符合SEO搜索引擎优化的设置，让您的网店更容易让搜索引擎收录. 简单易用极速网店真正做到以人为本、以用户体验为中心，能使您快速搭建网上购物网站。后台管理操作简单，一目了然，没有夹杂多

下载

function tableToExcel(table, name) {
    var uri = 'data:application/vnd.ms-excel;base64,';
    var template = '{table}';
    var base64 = function (s) {
        return window.btoa(unescape(encodeURIComponent(s)));
    };
    var format = function (s, c) {
        return s.replace(/{(\w+)}/g, function (m, p) {
            return c[p];
        });
    };

    if (!table.nodeType) table = document.getElementById(table);
    var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };
    var a = document.createElement('a');
    a.href = uri + base64(format(template, ctx));
    a.download = name + '.xls'; // 设置下载的文件名
    a.click(); // 触发下载
}

代码解释：

uri: 定义了数据 URI 的前缀，指定了 MIME 类型为 application/vnd.ms-excel，表示 Excel 文件。
template: 定义了 Excel 文件的 HTML 模板，包含了必要的 XML 命名空间声明和表格结构。 charset=UTF-8 保证中文内容正常显示。
base64: 将字符串转换为 Base64 编码。
format: 使用传入的上下文对象替换模板中的占位符。
table: 接收 HTML 表格的 ID 或元素本身。
name: 接收导出的 Excel 文件名。
a: 创建一个元素，用于触发下载。
a.href: 设置元素的 href 属性为包含表格数据的 Data URI。
a.download: 设置元素的 download 属性为指定的文件名，浏览器会使用该文件名保存文件。
a.click(): 模拟点击元素，触发下载。

使用示例

假设你的 HTML 中有一个 ID 为 "myTable" 的表格，你可以这样调用 tableToExcel 函数：




    Export to Excel



    
        
            
                Name
                Age
            
        
        
            
                John Doe
                30
            
            
                Jane Smith
                25

Name	Age
John Doe	30
Jane Smith	25

点击 "Export to Excel" 按钮后，将会下载一个名为 "MyExcelFile.xls" 的 Excel 文件。

注意事项

兼容性: 这种方法在现代浏览器中工作良好。对于旧版本的浏览器，可能需要使用 Flash 或其他插件来实现导出功能。
数据量: 对于非常大的表格，这种方法可能会导致性能问题，因为整个表格数据会被编码为 Base64 字符串。在这种情况下，考虑使用服务器端解决方案来生成 Excel 文件。
样式: 这种方法只会导出表格的结构和数据，不会保留表格的样式（例如颜色、字体等）。如果需要保留样式，则需要使用更复杂的库，例如 xlsx 或 exceljs。
文件名后缀: 虽然这里使用了 .xls 后缀，但实际生成的是 HTML 格式的 Excel 文件。现代版本的 Excel 能够正确打开这种文件。如果需要生成真正的 .xlsx 文件，则需要使用专门的 Excel 文件生成库。