Layui表格导出PDF不可靠，应优先用table.exportFile()导出Excel；若必须PDF，需精简DOM、约束html2canvas参数并手动分页，数据量大时应交由后端iText处理。
纯前端用 html2canvas + jsPDF 导出大量 Layui 表格为 PDF，不可靠——尤其数据超 50 行时，极易内存溢出、文字截断、样式错位、中文字体丢失。真实项目里，这不该是首选方案。
为什么 html2canvas 渲染 Layui 表格会失真
html2canvas 不解析 CSSOM，也不执行 CSS 媒体查询或伪类（如 ::before），Layui 的 .layui-table 依赖大量 inline-style + 动态计算的 padding/margin/width，canvas 截图后常出现列宽塌陷、固定列偏移、滚动条残留、斑马纹错行等问题。更麻烦的是：表格内容若含 lay-date、lay-select 或自定义模板（templet），这些 DOM 在 canvas 中往往渲染为空白或乱码。
常见错误现象：
- 导出 PDF 后中文显示为方块或空白（未注入字体）
- 表格右侧被截断，或列头与数据列错位
- 点击导出后浏览器卡死、控制台报
RangeError: Maximum call stack size exceeded - PDF 第一页正常，后续页面全是白页（
heightLeft计算逻辑没适配分页高度）
table.exportFile() 是导出全量数据的正确入口
Layui 自带的 table.exportFile() 方法才是导出“全部页数据”的标准路径——它不依赖截图，而是直接序列化你传入的原始数据（JSON 数组），按字段映射生成 Excel（xls 或 csv），格式稳定、体积小、兼容性好。
立即学习“前端免费学习笔记（深入）”；
使用前提和要点：
- 必须先调用
table.render()初始化一个带id的表格实例（哪怕只是隐藏的空表），否则table.exportFile()找不到列配置和title - 数据必须是你自己通过 AJAX 拉取的全量结果（不是
table.cache，那只是当前页缓存） - 导出文件名由该表格实例的
title配置项决定，不是参数传入 - 若数据含长数字（如身份证号）、日期，后端需在字段值末尾加
\t（制表符）防止 Excel 自动转科学计数法；Layui 2.5.4+ 支持该写法
如果非要用前端 PDF，至少绕过三个坑
若业务强要求 PDF（比如要盖电子章、走审批流），且确认数据量可控（≤30 行），可做最小化加固：
- 不要截整个
.layui-table容器，而是用table.config.cols动态生成一个干净的<table> DOM，仅含 <code><thead><tr><th> 和 <code><tbody><tr><td>，去掉所有 Layui 的 class 和内联样式 <li>给 <code>html2canvas加严格约束：{ useCORS: true, scale: 1, logging: false, scrollY: 0, scrollX: 0 }，禁用自动缩放和日志，避免因滚动容器导致截图偏移 - 用
jsPDF的autoPaging: 'text'替代手动分页循环——但注意：它只对纯文本有效，对图片无效；所以仍得用addImage+ 手动计算，且每页只塞一张图，position必须重置为0，否则第二页内容会叠在第一页下方
真正难处理的不是代码怎么写，而是当用户导出 200 行带 ECharts 图表的表格时，前端 PDF 方案根本扛不住——这时候再补 canvas 参数、加 polyfill、切片渲染，不如直接改后端接口加 export=pdf 分支，用 iText 渲染 HTML 模板。前端只负责跳转，不碰 PDF 生成逻辑。
