前端导出pdf表格 解决多行内容被分页“截断”

734 阅读1分钟

🔹1. 使用html2canvas页面过长时,图片高度超过 PDF 一页限制,导致内容被截断或缩放变形

  • 比如 A4 高度是 297mm(≈1122px at 96 DPI),但你的页面可能高达 5000px。
  • 如果你直接插入这张大图进 PDF,会:
    • 显示变形(被压缩);
    • 或者只能显示第一页,其余被截掉;
    • 或者需要你手动裁切分页

🔹2. pdfmake 和 jspdf 对比,pdfmark 和 jspdf都能解决多页内容自动换行防止被截断

pdfmakejspdf
数据结构数据结构兼容性强,结构简单易懂数据和html中的结构相同,合并行和列时,被合并的行和列不能展示在数据中
缺点不支持文本垂直居中合并行( rowSpan )的单元格,在表格分页后不会自动延续内容到下一页,表现为从第二页开始那一列是空白的
中文支持,需替换vfs_fonts.js支持,需通过addFileToVFS更改

🔹3. pdfmake的使用方法

oct1a.github.io/pdfmake-doc…

🔹4. jspdf的使用方法

www.jspdf.top/