Bootstrap Table导出需加载4个核心JS文件:tableExport.min.js、xlsx.core.min.js、FileSaver.min.js和bootstrap-table-export.js;exportDataType支持basic(当前页)、all(全量)、selected(选中行)三种数据范围;中文乱码须设exportOptions.charset='utf-8',文件名失效需显式指定fileName。

Bootstrap 表单本身不提供导出功能,你真正要导出的是「表格数据」——哪怕它嵌在 Bootstrap 样式里。常见误区是把 <form> 当作数据源,结果发现导出为空或结构错乱。核心在于:必须先有渲染完成的 <table>(或能转成表格结构的数据),再用导出插件处理。
bootstrap-table 导出 Excel 必须加载的 4 个 JS 文件
只引入 bootstrap-table-export.js 会报错或导出失败,因为它依赖底层转换逻辑。漏掉任一文件都可能表现为:点击无反应、中文乱码、Excel 打不开、仅导出表头无数据。
-
tableExport.min.js(核心导出引擎,处理格式转换) -
xlsx.core.min.js(生成 .xlsx 文件必需,2007+ 格式) -
FileSaver.min.js(触发浏览器下载,不能用saveAs别名替代) -
bootstrap-table-export.js(Bootstrap Table 的扩展桥接层)
注意:jspdf、html2canvas 等仅在导出 PDF 或 PNG 时需要,Excel 场景下可不加,避免干扰。
exportDataType 配置决定导出哪部分数据
这个参数控制数据范围,但行为和直觉有偏差:
-
exportDataType: 'basic'→ 实际导出当前页渲染出的<tbody>行(含分页后可见行) -
exportDataType: 'all'→ 导出全部原始数据(需服务端返回全量或前端缓存全量) -
exportDataType: 'selected'→ 仅导出用户勾选的行(要求checkbox: true且已启用多选)
常见坑:设为 'all' 但表格用的是客户端分页(sidePagination: 'client'),此时它只导出当前页数据 —— 因为全量数据没传给前端。解决方法是改用服务端分页,或手动把全量数据塞进 data 选项。
中文乱码和文件名失效的直接修复方式
导出 Excel 中文乱码,90% 是因为 exportOptions 缺少编码声明;文件名变成 download.xlsx,是因为没指定 fileName 或值为空字符串。
- 强制 UTF-8 编码:在
exportOptions中加charset: 'utf-8' - 文件名支持中文:用
fileName: '用户报表_' + new Date().toISOString().slice(0,10)(避免空格或特殊符号) - 工作表名(sheet name)不能超过 31 字符,且不能含
\ / ? * [ ],否则 Excel 打开报错 - 如果导出后数字列显示为科学计数法(如 1234567890 → 1.23E+09),加
onMsoNumberFormat回调处理
最易被忽略的一点:导出前表格 DOM 必须已完整渲染。如果你在 $(document).ready() 里立刻调用导出,而表格数据是异步加载的,就会导出空表。务必等 onLoadSuccess 回调触发后再允许用户点击导出按钮,或把导出逻辑封装进该回调内。


















