使用html2canvas与jsPDF生成多页PDF时图片顶部被裁切求助

从你的代码和描述来看，顶部裁切的问题通常和html2canvas的视口捕获范围、元素的布局样式，或者jsPDF中图片的定位有关。这里有几个针对性的解决方案，你可以逐一尝试：

方案1：确保页面滚动到顶部并调整html2canvas捕获配置 #

有时候页面的滚动位置会干扰html2canvas的捕获范围，另外可以通过精准配置视口来确保元素顶部被完整捕获：

var data = document.getElementsByClassName('divtocapture');
for(let content=0;content<data.length;content++) {
  // 强制页面滚动到顶部，避免滚动位置影响捕获结果
  window.scrollTo(0, 0);
  
  html2canvas(data[content] as HTMLElement, {
    scale: 2,
    width: 1150,
    scrollX: 0,
    scrollY: 0,
    allowTaint: true,
    backgroundColor: '#fff',
    // 添加viewport配置，明确捕获的视口范围
    viewport: {
      top: 0,
      left: 0,
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    }
  }).then(canvas => {
    var imgWidth = pdf.internal.pageSize.getWidth();
    var imgHeight = canvas.height * imgWidth / canvas.width;
    const contentDataURL = canvas.toDataURL('image/JPEG',1.0);
    // 调整顶部边距，从10px改为15px，给顶部内容留出更多空间
    pdf.addImage(contentDataURL, 'JPEG', 5, 15, imgWidth, imgHeight);
    pdf.save('mypdf.pdf');
  })
}

方案2：临时调整目标元素的CSS样式 #

你的.divtocapture或内部的.card-header可能存在默认的margin/padding，或者被父元素的overflow隐藏了顶部内容。可以动态添加样式确保捕获完整：

var data = document.getElementsByClassName('divtocapture');
for(let content=0;content<data.length;content++) {
  const targetEl = data[content] as HTMLElement;
  // 保存原有样式，捕获完成后恢复
  const originalStyle = targetEl.style.cssText;
  // 临时添加样式，避免顶部内容被隐藏
  targetEl.style.paddingTop = '10px';
  targetEl.style.marginTop = '0';
  targetEl.style.overflow = 'visible';
  
  window.scrollTo(0, 0);
  
  html2canvas(targetEl, {
    scale: 2,
    width: 1150,
    scrollX: 0,
    scrollY: 0,
    allowTaint: true,
    backgroundColor: '#fff'
  }).then(canvas => {
    // 恢复元素原有样式
    targetEl.style.cssText = originalStyle;
    
    var imgWidth = pdf.internal.pageSize.getWidth();
    var imgHeight = canvas.height * imgWidth / canvas.width;
    const contentDataURL = canvas.toDataURL('image/JPEG',1.0);
    pdf.addImage(contentDataURL, 'JPEG', 5, 10, imgWidth, imgHeight);
    pdf.save('mypdf.pdf');
  })
}

方案3：修正图片高度计算，避免内容超出页面 #

如果图片高度计算后超出PDF页面的可用高度，也可能导致顶部内容被裁切。可以手动限制图片高度，确保适配页面：

html2canvas(targetEl, { /* 其他配置 */ }).then(canvas => {
  const pdfPageWidth = pdf.internal.pageSize.getWidth();
  const pdfPageHeight = pdf.internal.pageSize.getHeight();
  const imgWidth = pdfPageWidth - 10; // 左右各留5px边距
  let imgHeight = (canvas.height * imgWidth) / canvas.width;
  
  // 如果图片高度超过页面可用高度，等比例缩小
  if (imgHeight > pdfPageHeight - 20) { // 上下各留10px边距
    imgHeight = pdfPageHeight - 20;
    imgWidth = (canvas.width * imgHeight) / canvas.height;
  }
  
  pdf.addImage(contentDataURL, 'JPEG', 5, 10, imgWidth, imgHeight);
  pdf.save('mypdf.pdf');
})

方案4：开启日志排查问题 #

如果以上方法都无效，可以开启html2canvas的日志功能，在浏览器控制台查看捕获时的视口和元素位置细节，帮助定位问题：

html2canvas(targetEl, {
  // 其他配置
  logging: true // 开启日志，控制台会输出捕获的详细信息
})

建议先尝试方案1和方案2，这两个是解决顶部裁切问题最常见的方法。如果还是不行，再通过日志功能进一步排查元素的渲染状态。

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