jsPDF渲染异常求助：仅保存HTML尾部内容且无法适配A4格式

嘿，作为JavaScript新手碰到这个PDF导出的问题太正常了，我来一步步帮你搞定：

问题根源分析 #

你当前的代码里有两个关键问题：

• 用了letter纸张尺寸（北美标准，比A4略宽一点），而非需求的A4规格
• jsPDF的addHTML方法在处理多页长内容时，本身就容易出现截断、分页异常的情况，且没做边距适配导致内容和PDF自带边距重叠

解决方案1：快速修正基础配置 #

先把纸张尺寸改成A4，同时显式设置PDF边距，避免内容溢出：

function savePDF() {
  // 初始化A4纵向文档，单位为pt
  const pdf = new jsPDF('p', 'pt', 'a4');
  // 获取A4页面的基础尺寸
  const pageWidth = pdf.internal.pageSize.getWidth();
  const pageHeight = pdf.internal.pageSize.getHeight();
  const margin = 40; // 设置40pt的边距，可按需调整

  pdf.addHTML($('#someHtml')[0], margin, margin, {
    width: pageWidth - 2*margin, // 内容宽度适配边距后的可打印区域
    background: '#fff' // 确保背景色正常渲染
  }, function () {
    pdf.save('Test.pdf');
  });
}

解决方案2：用html2canvas + jsPDF实现可靠分页（推荐） #

addHTML底层依赖html2canvas，但直接组合这两个工具能更精准控制分页，彻底解决长内容截断问题：

1. 确保你已经引入了html2canvas（和jsPDF一同加载）
2. 使用以下代码处理多页内容：

async function savePDF() {
  const element = document.getElementById('someHtml');
  const margin = 40;
  const pdf = new jsPDF('p', 'pt', 'a4');
  const pageWidth = pdf.internal.pageSize.getWidth() - 2*margin;
  const pageHeight = pdf.internal.pageSize.getHeight() - 2*margin;

  // 将HTML渲染为canvas，提高清晰度
  const canvas = await html2canvas(element, {
    scale: 2,
    useCORS: true,
    logging: false
  });

  const imgData = canvas.toDataURL('image/png');
  const imgWidth = pageWidth;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = margin;

  // 添加第一页内容
  pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  // 循环添加后续分页
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }

  pdf.save('Test.pdf');
}

额外样式适配建议 #

给你的HTML容器添加样式，避免内容超出PDF可打印区域：

#someHtml {
  width: 595pt; /* A4标准宽度（不含边距） */
  padding: 40pt;
  box-sizing: border-box;
  background: white; /* 确保背景为白色，避免透明内容导出异常 */
}

这样调整后，你的两页内容就能完整适配A4尺寸，不会再出现截断和边距重叠的问题啦！

内容的提问来源于stack exchange，提问作者Karim