纯前端导出Excel带样式：零依赖JS方案生产环境实践

简介：这是一份面向前端开发者的实用技术资源，聚焦于在浏览器环境中使用原生JavaScript将HTML表格导出为Excel文件，并尽可能保留原有样式。内容以谷歌浏览器为运行环境，系统讲解两种样式保留方案：一是在td等元素行内直接书写style样式，二是在导出模板的style标签中集中定义CSS规则，并给出完整可运行的HTML与JS代码示例，涵盖Blob对象、base64编码、URL.createObjectURL及下载链接设置等关键环节。资源包为1个PDF文件，约62KB，篇幅精炼，适合作为随查随用的代码参考手册。目前已有2077人学习下载，说明该方案在实际项目中具有较高参考价值。读者可从中掌握tableToExcel函数的实现思路、模板拼接与样式注入技巧，并了解复杂CSS在Excel中可能失效的边界，为后续引入SheetJS等第三方库打下基础，适合具备一定JS基础、需要快速实现表格导出功能的前端开发者。

1. 纯前端导出 Excel 还带样式：这套 JS 方案到底能不能用在生产环境

后台管理系统里十张表有八张要导出，产品还要求「导出来的 Excel 跟页面上长得一样」。很多人第一反应是上 SheetJS、exceljs 这类库，但真到要保留背景色、字号、合并单元格的时候，要么配置写到手软，要么样式根本带不过去。这套基于原生 JS 的方案走的是另一条路：把 table 的 HTML 结构塞进一个 Excel 能识别的 HTML 模板，再用 base64 拼成data:URI 挂到<a download>上，点击即下载，零依赖、零构建、单文件就能跑。

它解决的核心问题是「样式怎么跟着数据一起走」。方案给了两条路：行内 style 和模板 style，并且明确了一个关键规则——行内样式优先级高于模板样式。适合谁？做后台报表、运营数据看板、需要快速交付导出功能又不想引库的前端。不适合谁？需要多 sheet、公式、图表、十万行以上大数据量的场景，那还是老老实实上专业库。下面把它拆开，从原理到代码到坑，一步步复现。

2. 原理拆解：data URI + Excel HTML 模板是怎么骗过浏览器的

2.1 为什么data:application/vnd.ms-excel能触发下载

浏览器识别文件类型靠的是 MIME。当<a>的 href 是一个data:开头的 URI，并且 MIME 声明为application/vnd.ms-excel时，浏览器会把它当成一个 Excel 文件来处理。配合download属性指定文件名，点击链接就直接下载，不跳转、不请求后端。

这套机制的本质是：Excel 本身能打开 HTML 格式的文档。微软在 Office 里内置了对 HTML 的解析能力，只要 HTML 里带上特定的命名空间声明（urn:schemas-microsoft-com:office:excel），Excel 就会按表格来渲染，而不是当纯文本。所以整个方案的核心不是「生成 xlsx」，而是「生成一个 Excel 认得的 HTML」。

这里有个容易混淆的点：导出的文件后缀是.xls，但内容其实是 HTML。Excel 打开时会弹一个「文件格式与扩展名不匹配」的警告。这是这套方案最典型的副作用，后面避坑章节会讲怎么处理。

2.2 模板字符串里的命名空间和 WorksheetOptions 起什么作用

看模板里这段：

var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' + 'xmlns="http://www.w3.org/TR/REC-html40"><head>' + '<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' + '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' + '</x:ExcelWorkbook></xml><![endif]-->' + '<style type="text/css">table td {border: 1px solid #000000;width: 200px;height: 30px;text-align: center;background-color: #4f891e;color: #ffffff;}</style>' + '</head><body><table class="excelTable">{table}</table></body></html>';

三个命名空间分别对应 Office 文档属性、Excel 工作簿结构、HTML 标准。<!--[if gte mso 9]>是条件注释，只有 Office 9 及以上版本才会解析里面的 XML。<x:Name>{worksheet}</x:Name>决定 sheet 标签页的名字，<x:DisplayGridlines/>控制是否显示网格线。这些不是可选项，缺了 Excel 可能不认。

{table}和{worksheet}是占位符，靠format函数替换。这个设计的好处是模板和数据分离，改样式只动模板，改数据只动 table。

2.3 base64 转码为什么必须走unescape(encodeURIComponent(s))

var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); };

btoa只能处理 Latin-1 字符，中文直接传进去会报InvalidCharacterError。encodeURIComponent先把中文转成 UTF-8 的百分号编码，unescape再把百分号编码还原成单字节序列，这样btoa就能正常编码。这是处理中文内容的标准写法，少了任何一层，中文表格导出就是乱码或者直接抛异常。

2.4 完整可运行代码

把上面的片段拼起来，一个完整的 HTML 文件如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table导出Excel</title> <style> table td { font-size: 12px; width: 200px; height: 30px; text-align: center; background-color: #4f891e; color: #ffffff; } </style> </head> <body> <a download="table导出Excel" id="excelOut" href="#">table导出Excel</a> <table cellspacing="0" cellpadding="0" border="1" id="tableToExcel"> <thead> <tr> <td style="font-size: 18px">公司一</td> <td>公司二一</td> <td>公司三</td> </tr> </thead> <tbody> <tr><td>A公司</td><td>B公司</td><td>C公司</td></tr> <tr><td>A公司</td><td>B公司</td><td>C公司</td></tr> <tr><td>A公司</td><td>B公司</td><td>C公司</td></tr> <tr><td colspan="3">共计</td></tr> </tbody> </table> <script> window.onload = function () { tableToExcel('tableToExcel', '下载模板'); }; 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]; }); }; function tableToExcel(tableid, sheetName) { var uri = 'data:application/vnd.ms-excel;base64,'; var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' + 'xmlns="http://www.w3.org/TR/REC-html40"><head>' + '<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' + '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' + '</x:ExcelWorkbook></xml><![endif]-->' + '<style type="text/css">table td {border: 1px solid #000000;width: 200px;height: 30px;text-align: center;background-color: #4f891e;color: #ffffff;}</style>' + '</head><body><table class="excelTable">{table}</table></body></html>'; if (!tableid.nodeType) tableid = document.getElementById(tableid); var ctx = { worksheet: sheetName || 'Worksheet', table: tableid.innerHTML }; document.getElementById("excelOut").href = uri + base64(format(template, ctx)); } </script> </body> </html>

逻辑说明：页面加载后自动调用tableToExcel，把tableToExcel这个 id 的表格内容和 sheet 名「下载模板」塞进模板，生成 base64 字符串赋给下载链接的 href。用户点击链接时，浏览器按application/vnd.ms-excel处理，下载为.xls文件。

参数说明：tableid可以是 DOM 元素或字符串 id，函数内部做了判断；sheetName不传默认Worksheet；模板里的{table}取的是tableid.innerHTML，也就是表格内部结构，不含<table>标签本身。

3. 两种样式保留方式：行内 style 和模板 style 怎么选、怎么写

3.1 行内样式：直接写在 td 上，优先级最高

行内样式就是在<td>或<th>上直接写style属性：

<table id="tableToExcel"> <thead> <tr> <td style="font-size: 18px; background-color: #4f891e; color: #ffffff;">公司一</td> <td style="font-size: 12px; text-align: center;">公司二一</td> <td style="font-size: 12px; text-align: center;">公司三</td> </tr> </thead> <tbody> <tr> <td style="background-color: #4f891e; color: #ffffff;">A公司</td> <td>B公司</td> <td>C公司</td> </tr> </tbody> </table>

这种方式的优点是所见即所得，页面上什么样式，导出就是什么样式，不依赖模板里的 CSS。缺点是 HTML 会变得很臃肿，尤其是列多的时候，每个 td 都要重复写一遍。维护起来也麻烦，改一个颜色要全局替换。

适用场景：表格列数少、样式差异大、需要精确控制每个单元格的场景。比如表头单独配色、某几行高亮。

3.2 模板样式：在<style>里统一定义，Excel 也能识别

模板样式是把 CSS 写在导出模板的<style>标签里：

var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' + 'xmlns="http://www.w3.org/TR/REC-html40"><head>' + '<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' + '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' + '</x:ExcelWorkbook></xml><![endif]-->' + '<style type="text/css">' + 'table td {border: 1px solid #000000;width: 200px;height: 30px;text-align: center;background-color: #4f891e;color: #ffffff;}' + '</style>' + '</head><body><table class="excelTable">{table}</table></body></html>';

Excel 解析这段 HTML 时，会读取<style>里的规则并应用到表格上。table td选择器对所有单元格生效，border、width、height、text-align、background-color、color这些属性 Excel 都认。

适用场景：整张表样式统一、列数多、需要批量控制。比如所有单元格统一边框、统一字号、统一背景色。

3.3 优先级规则：行内覆盖模板，别踩这个坑

原文明确说了：如果同时添加了行内样式和模板样式，行内的样式会覆盖模板的样式。这是 CSS 的层叠规则在 Excel 里的体现。

举个例子：模板里写了table td { background-color: #4f891e; }，某个 td 上写了style="background-color: #ff0000;"，导出后这个单元格是红色，不是绿色。这个规则本身没问题，但容易翻车的地方在于：页面上用外部 CSS 类控制的样式，导出时不会自动带过去。因为tableid.innerHTML只拿结构，不拿外部样式表。页面上看起来是绿色的单元格，如果绿色是写在<style>里的类选择器，导出后可能就丢了。

所以选型建议是：要么全用行内样式，保证所见即所得；要么全用模板样式，保证导出统一。混用的时候，心里要清楚哪些样式会被覆盖、哪些样式根本传不过去。

3.4 一个容易忽略的细节：colspan和rowspan的保留

表格里的合并单元格靠colspan和rowspan属性。这套方案取的是innerHTML，属性会原样保留，Excel 打开后合并效果也在。但要注意：如果合并单元格上只写了行内样式，合并后的区域样式可能只应用到第一个单元格。稳妥的做法是在模板里对td统一设置样式，让合并区域继承。

<tr> <td colspan="3" style="text-align: center; font-weight: bold;">共计</td> </tr>

这行代码里colspan="3"让「共计」横跨三列，text-align: center和font-weight: bold是行内样式，导出后 Excel 里也是居中和加粗。如果去掉行内样式，靠模板的table td规则，同样能生效，但加粗需要模板里额外写font-weight。

4. 避坑与排查：导出乱码、样式丢失、格式警告怎么破

4.1 中文乱码：现象是导出后中文变成问号或方块

现象：导出的 Excel 打开后，中文内容显示为乱码，英文和数字正常。

原因：btoa不支持非 Latin-1 字符，如果直接传含中文的字符串会抛异常；如果绕过了异常但编码链路不对，Excel 解析时按错误编码读取，就显示乱码。

解决：严格使用window.btoa(unescape(encodeURIComponent(s)))这个三层转换。encodeURIComponent负责 UTF-8 编码，unescape负责还原字节序列，btoa负责 base64。三层缺一不可。另外确保 HTML 文件本身是 UTF-8 编码，<meta charset="UTF-8">要写上。

4.2 样式丢失：现象是页面上有颜色，导出后全白

现象：页面上表格有背景色、边框、字号，导出到 Excel 后这些样式全没了，只剩纯文本。

原因：页面的样式写在外部 CSS 文件或<style>里的类选择器上，tableid.innerHTML只取 HTML 结构，不包含外部样式。Excel 打开时没有这些 CSS 规则，自然不渲染。

解决：把需要导出的样式要么写成行内 style，要么复制一份到导出模板的<style>里。我一般会在模板里把table td的基础样式写全，然后对特殊单元格用行内样式覆盖。这样既保证基础样式不丢，又保留灵活调整的空间。

4.3 格式警告：现象是 Excel 打开时弹「文件格式与扩展名不匹配」

现象：双击下载的.xls文件，Excel 弹窗提示「文件格式与扩展名不匹配，是否仍要打开」。

原因：文件内容实际是 HTML，但扩展名是.xls。Excel 按扩展名判断为旧版二进制格式，打开发现是 HTML，就弹警告。

解决：这个警告不影响使用，点「是」就能正常打开。如果要去掉，有两个方向：一是把download属性改成.html后缀，但用户双击默认用浏览器打开，体验不对；二是改用真正的 xlsx 生成库，比如 SheetJS，但那就不是这套零依赖方案了。生产环境如果用户对警告敏感，可以在下载后加一句提示，或者接受这个副作用。

4.4 大数据量卡顿：现象是表格几千行时页面卡死

现象：表格数据超过几千行，点击导出后页面卡顿甚至无响应。

原因：innerHTML拼接大字符串、encodeURIComponent处理长文本、btoa编码，都是同步操作，数据量大时阻塞主线程。

解决：分页导出，或者限制单次导出的行数。如果必须全量导出，考虑用Blob+URL.createObjectURL替代data:URI，减少 base64 编码开销。再大就上 Web Worker 或者换专业库。这套方案的设计定位就是中小数据量，别硬扛。

4.5 多表格导出：现象是页面上多个 table，只能导出一个

现象：页面有多个表格，调用tableToExcel时只传了一个 id，其他表格导不出来。

原因：函数一次只处理一个 table，{table}占位符只替换一次。

解决：如果要导出多个 sheet，需要扩展模板，在<x:ExcelWorksheets>里加多个<x:ExcelWorksheet>，每个对应一个 sheet 名和表格内容。但这就超出这套简单方案的范围了，建议直接上 SheetJS。单表格场景下，这套方案足够用。

5. 进阶技巧：动态数据、按钮触发和导出前的样式预处理

5.1 从「页面加载自动导出」改成「按钮点击导出」

原始代码在window.onload里直接调用tableToExcel，页面一加载就生成下载链接。实际项目里更常见的是用户点按钮才导出。改法很简单：

<button id="exportBtn">导出 Excel</button> <a download="table导出Excel" id="excelOut" href="#" style="display:none;">下载</a> <script> document.getElementById('exportBtn').onclick = function () { tableToExcel('tableToExcel', '数据报表'); document.getElementById('excelOut').click(); }; </script>

逻辑说明：按钮点击时先调用tableToExcel生成 href，然后触发隐藏链接的click()事件，浏览器执行下载。这样用户不会看到那个裸露的下载链接，交互更自然。

参数说明：sheetName传「数据报表」，导出的 Excel 底部标签页就叫这个名字。display:none隐藏链接但保留功能，click()方法对隐藏元素同样有效。

5.2 导出前动态改样式：比如把负数标红

有时候需要在导出时对特定数据做样式处理，比如负数标红、超标数据加背景。可以在调用tableToExcel之前操作 DOM：

function exportWithHighlight(tableId, sheetName) { var table = document.getElementById(tableId); var cells = table.querySelectorAll('td'); cells.forEach(function (td) { var val = parseFloat(td.textContent); if (!isNaN(val) && val < 0) { td.style.color = '#ff0000'; td.style.fontWeight = 'bold'; } }); tableToExcel(tableId, sheetName); }

逻辑说明：遍历所有 td，把内容能解析为数字且小于 0 的单元格文字标红加粗，然后走导出流程。行内样式优先级最高，会覆盖模板样式，所以红色一定能带进 Excel。

参数说明：parseFloat解析失败返回NaN，用isNaN过滤掉非数字单元格。fontWeight设为bold让负数更醒目。这个操作会修改页面上的样式，如果不想影响页面显示，可以在导出后还原，或者克隆一份表格专门用于导出。

5.3 验证导出结果是否正确的三个检查点

导出功能写完，别急着交付，按这三个点验一遍：

第一点验编码，第二点验样式传递，第三点验结构完整性。三点都过，基本就能交付了。

5.4 一个我踩过的坑：模板里的class="excelTable"其实没用到

模板里写了<table class="excelTable">，但 CSS 选择器用的是table td，这个 class 实际上没起作用。我一开始以为要靠这个 class 来匹配样式，折腾了半天发现去掉也不影响。它的存在可能是为了语义清晰，或者留给更复杂的选择器用。如果你要写.excelTable td { ... }这样的选择器，那这个 class 就有意义了。否则留着无害，去掉也行。

从那以后我每次写导出模板，都会先确认 CSS 选择器和表格结构对得上，不再盲目复制粘贴。这套方案代码量不大，但细节不少，编码、样式优先级、模板结构，每一环都可能出问题。希望帮到你。

本文还有配套的精品资源，点击获取