使用 html2canvas 与 jspdf 完美生成 PDF：解决内容截断问题

作者：十万个为什么

2024.03.15 03:43

浏览量： 239

简介： 本文将探讨在使用 html2canvas 与 jspdf 将 HTML 内容转换为 PDF 时，遇到内容被截断的问题，并提供终极解决方案。

在 Web 开发中，将 HTML 内容转换为 PDF 是一种常见需求。html2canvas 和 jspdf 是两个流行的 JavaScript 库，它们分别用于将 HTML 元素转换为 Canvas，以及将 Canvas 内容保存为 PDF。然而，在使用这两个库时，有时会遇到内容被截断的问题。本文将分析这一问题的原因，并提供解决方案。

内容被截断的问题通常是由于 HTML 元素或 Canvas 内容的尺寸超出了 PDF 页面的尺寸范围。jspdf 默认使用 A4 纸张大小，并且不会自动分页。如果 html2canvas 生成的 Canvas 内容超出了这个范围，那么在转换为 PDF 时，超出部分就会被截断。

要解决这个问题，我们可以采取以下步骤：

调整 HTML 元素尺寸 ：确保你的 HTML 元素在视觉上适应 A4 纸张大小。如果元素过大，考虑使用 CSS 媒体查询或 JavaScript 动态调整其尺寸。

自动分页 ：jspdf 提供了自动分页的功能。你可以通过设置 autoTableContentHeight 参数为 null 来启用自动分页。这样，当内容超出页面高度时，jspdf 会自动将内容移至下一页。

var doc = new jsPDF('p', 'mm', 'a4');
doc.autoTableContentHeight('null');

手动分页 ：如果自动分页不满足你的需求，你还可以手动控制分页。在将 Canvas 内容添加到 PDF 之前，先检查其高度，如果超出了当前页面的剩余高度，就插入一个分页。

var canvas = document.getElementById('your-canvas-id');
var imgData = canvas.toDataURL('image/png');
var imgProps = jspdf.getImageProperties(imgData);
var pdfWidth = doc.internal.pageSize.getWidth();
var pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
if (doc.internal.currentPageSize.height < pdfHeight) {
    doc.addPage();
}
doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);


         
          
           
            使用 html2canvas 的 scale 参数
           
           ：html2canvas 提供了一个 scale 参数，你可以用它来缩放生成的 Canvas 内容。通过减小 scale 值，你可以减小 Canvas 的尺寸，从而避免内容截断。
          
          html2canvas(element, {
    scale: 0.8 // 根据需要调整缩放比例
}).then(canvas => {
    // 将 canvas 转换为 PDF
});