使用jQuery导出HTML表格为UTF-8 Excel时特殊字符乱码问题

阿华AIGC实验室

2026-5-15

解决jQuery导出HTML表格为Excel时UTF-8特殊字符乱码问题

我之前也碰到过完全一样的问题！直接把HTML表格转成data URI导出成Excel时，特殊字符乱码的核心原因是Excel对UTF-8编码的识别逻辑——它需要读取到UTF-8的BOM（字节顺序标记）才会用UTF-8解码文件，而你原来的写法里刚好缺少这个关键部分，同时content-type的设置也不够严谨。

下面是修改后的完整解决方案，亲测能解决特殊字符显示异常的问题：

修改后的jQuery代码

$(document).ready(function() {
  $("#excel").click(function(e) {
    e.preventDefault();
    
    // 获取目标表格的HTML内容
    var table = document.getElementById('exportExcel');
    var tableHtml = table.outerHTML;
    
    // 构造带UTF-8 BOM的Excel内容，包裹完整HTML结构并声明编码
    var excelContent = "\ufeff" + "<html><head><meta charset='UTF-8'></head><body>" + tableHtml + "</body></html>";
    
    // 创建Blob对象，明确指定MIME类型和UTF-8编码
    var blob = new Blob([excelContent], { type: "application/vnd.ms-excel;charset=utf-8" });
    
    // 生成下载链接并触发点击
    var a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'exported_table.xls';
    a.click();
    
    // 释放URL对象（优化内存使用，可选但推荐）
    URL.revokeObjectURL(a.href);
  });
});

关键修改点说明

添加UTF-8 BOM字符\ufeff：这是让Excel识别UTF-8编码的核心，没有它Excel会默认用系统本地编码（比如Windows-1250）读取，导致特殊字符乱码。
包裹完整HTML结构：把表格放在<html>标签内，并添加<meta charset='UTF-8'>声明，双重确保编码信息被正确识别。
使用Blob替代data URI：这种方式比直接拼接data URI更稳定，不仅能避免大表格时的URI长度限制，还能更精准地控制文件的编码和MIME类型。

另外，你原来页面中的<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">标签可以删除，因为它是页面的元信息，对导出的独立Excel文件没有任何影响，导出文件的编码由我们上面构造的内容决定。

测试一下这个修改后的代码，导出的Excel里像Ľudmila、Malá、Hraško这类特殊字符就能正常显示了！

内容的提问来源于stack exchange，提问作者tomas