layui table导出Word本质受限于官方仅支持Excel/CSV,需用jszip+docxtemplater纯前端生成.docx,依赖模板占位符、table.cache数据转换及UTF-8编码处理。
layui table 导出 Word 的本质限制
layui 官方不支持直接导出 .docx,它的 exportfile 只能导出 excel(.xls)或 csv。想导出 word,必须绕过 layui 自带导出逻辑,自己构造文档内容并触发下载。
用 jszip + docxtemplater 生成 .docx 最可行
纯前端生成格式规范的 Word 文档,目前最稳的组合是 jszip(打包)+ docxtemplater(模板填充)。不依赖后端,也不用操作 Office COM 或服务端转换。
- 需要提前准备一个 Word 模板(
template.docx),里面用{% raw %}{{tableData}}{% endraw %}这类占位符标记表格位置 - 用
layui.table.cache拿到当前表格数据(比如layui.table.cache['demo']) - 把数据转成二维数组或对象数组,传给
docxtemplater的setData - 调用
generate({type: "blob"})得到 Blob,再用saveAs下载 - 注意:
docxtemplaterv3+ 要求模板里表格必须是“重复区块”(loop),不能只靠文本替换
导出纯文本表格(无样式)的轻量替代方案
如果只要内容可读、不强求 Word 格式和排版,用 document.execCommand('copy') 或生成简单 HTML 表格再转 Blob 更快。
- 用
layui.table.render的done回调拿到data,拼成<table><tr><td>...</td></tr></table>字符串 - 加上
<html><body>...</body></html>包裹,并设置content-type: application/msword - 用
new Blob([htmlStr], {type: 'application/msword'})创建文件,URL.createObjectURL触发下载 - 缺点:Office 打开可能报“文件格式损坏”,WPS 兼容性稍好;不能含图片、合并单元格、样式复杂时错乱
- 优点:零依赖、10 行代码搞定,适合内部快速交付
容易被忽略的兼容性和数据处理细节
导出 Word 不是“把数据塞进去就完事”,实际落地时这几个点卡得最多:
- 中文字符必须确保模板和 JS 都用 UTF-8 ——
docxtemplater加载模板时漏掉{type: "arraybuffer"}会导致乱码 - layui 表格的 checkbox、开关等组件列,
table.cache里对应字段是原始值(如1/0),不是“是”/“否”,需手动映射 - 时间戳字段(
1624589230000)要先用layui.laydate.now或new Date()格式化,否则 Word 里显示为数字 - IE 11 不支持
Blob下载,若需兼容,得 fallback 到iframe+document.write(但仅限 HTML 方案)
真正麻烦的从来不是“怎么导出”,而是“导出后打开不报错、文字不丢、日期像日期、状态对得上”。模板、编码、字段映射这三关过了,剩下的就是体力活。


















