Vue3 实战：利用 html2canvas 与 jsPDF 完美解决 A4 PDF 分页截断问题

Vue3 实战：利用 html2canvas 与 jsPDF 完美解决 A4 PDF 分页截断问题

痛点分析

在 Web 端生成 PDF 报表时，直接使用 html2canvas 截图配合 jsPDF 往往会出现内容被切断的情况。特别是长表格或图文混排页面，默认的单页模式无法处理超出 A4 高度的内容，导致最后一页显示不全。

核心思路

解决的关键在于'分片'。我们需要计算 DOM 元素的总高度，根据 A4 纸的实际像素高度进行切分，然后逐段渲染到 PDF 的多页中。

实现步骤

1. 安装依赖

确保项目中已安装必要的库。

npm install html2canvas jspdf

2. 配置工具函数

封装一个通用的导出方法，处理缩放比例和分页逻辑。这里需要注意 window.devicePixelRatio 对清晰度的影响。

3. Vue3 组件集成

在组件中使用 ref 获取目标容器，调用导出逻辑。

// 伪代码示例，展示核心逻辑
const downloadPdf = async () => {
  const element = document.getElementById('print-area');
  // 计算高度并分页...
}

4. 常见问题排查

• 图片加载失败：需等待所有图片资源加载完毕再执行截图。
• 样式丢失：确保截图时保留了 CSS 样式，必要时引入全局样式。
• 滚动条干扰：隐藏滚动条避免影响布局。

总结

通过手动控制分页逻辑，可以有效避免内容截断。实际开发中建议针对复杂场景增加预览功能，确保最终效果符合预期。