html2canvas结合jsPDF导出PDF图像截断、无法完整显示全页面问题求助

问题核心触发原因 #

• jsPDF 1.3.3存在单页尺寸硬阈值，自定义传入20000+pt的超长页面高度时，会被库内部强制裁切，是最直接的截断诱因
• 原代码的跨页拆分变量计算完成后完全没有接入渲染逻辑，所有内容被直接塞到第一页，超出页面承载范围的部分直接被丢弃
• html2canvas配置参数传参错误：原本需要合并为一个对象的配置被拆成多个独立参数传入，实际只有allowTaint:true生效，scrollY、视口高度限制等配置全部没执行，截图本身就存在内容缺失
• 画布高度被无意义缩放：原代码写的canvas_image_height = HTML_Height/1.1直接砍掉了近10%的垂直高度，进一步放大截断问题

可直接替换的落地代码 #

首先删掉重复引入的html2canvas双份引用，替换为修正后的逻辑：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script>
function addWaterMark(pdf) {
  const totalPages = pdf.internal.getNumberOfPages();
  for (let i = 1; i <= totalPages; i++) {
    pdf.setPage(i);
    pdf.addImage("data:image/png;base64,......", "JPEG", 20, 40, 130, 30);  
  }
  return pdf;
}

function getPDF(){
  const targetDom = $("div#mycontent")[0];
  // 取容器实际完整渲染高度，不要用视口计算的裁剪高度
  const HTML_Width = targetDom.scrollWidth;
  const HTML_Height = targetDom.scrollHeight;
  const top_left_margin = 100;
  // 统一采用A4标准尺寸做页面基准，避开jsPDF单页尺寸超限问题
  const PDF_Page_Width = 595.28;
  const PDF_Page_Height = 841.89;
  // 计算单页内可承载的图像尺寸，扣除上下左右边距
  const fitImgWidth = PDF_Page_Width - top_left_margin * 2;
  const fitImgHeight = PDF_Page_Height - top_left_margin * 2;
  
  // 合并所有html2canvas配置，避免参数不生效
  html2canvas(targetDom, {
    allowTaint: true,
    useCORS: true,
    scrollY: 0,
    windowHeight: HTML_Height, // 强制全量渲染容器，不受当前视口高度限制
    scale: 2 // 提升截图清晰度
  }).then(function(fullCanvas) {
    // 初始化PDF实例
    const pdf = new jsPDF('p', 'pt', 'a4');
    let currentSlicePos = 0;
    const totalPages = Math.ceil(fullCanvas.height / (fitImgHeight * (fullCanvas.width / fitImgWidth)));
    
    for (let pageIdx = 1; pageIdx <= totalPages; pageIdx++) {
      // 非第一页手动新建空白页
      if (pageIdx !== 1) pdf.addPage('a4', 'p');
      // 切割当前页对应的图像片段
      const sliceCanvas = document.createElement('canvas');
      sliceCanvas.width = fullCanvas.width;
      // 最后一页自动适配剩余高度，避免重复截取
      const sliceHeight = Math.min(
        fitImgHeight * (fullCanvas.width / fitImgWidth),
        fullCanvas.height - currentSlicePos
      );
      sliceCanvas.height = sliceHeight;
      const sliceCtx = sliceCanvas.getContext('2d');
      sliceCtx.drawImage(
        fullCanvas, 
        0, currentSlicePos, fullCanvas.width, sliceHeight,
        0, 0, fullCanvas.width, sliceHeight
      );
      // 将切割好的片段写入PDF，保持比例不变形
      const sliceImgData = sliceCanvas.toDataURL("image/jpeg", 0.95);
      pdf.addImage(
        sliceImgData, 'JPEG',
        top_left_margin, top_left_margin,
        fitImgWidth, sliceHeight * (fitImgWidth / fullCanvas.width)
      );
      // 偏移到下一个切片的起始位置
      currentSlicePos += sliceHeight;
    }

    pdf = addWaterMark(pdf);
    pdf.save("test.pdf");
  });
};
</script>

高频排坑提示 #

• 不要给jsPDF传入自定义的超长尺寸数组做页面参数，一旦高度超过库的内部阈值，必然出现图像截断，优先用标准页面尺寸适配内容
• html2canvas的windowHeight必须设置为目标容器的实际滚动高度，否则截图只会捕获当前视口可见的范围，超出部分会是空白
• 所有html2canvas的配置项要合并为单个对象传入，拆成多个独立参数传入时只有第一个配置会生效
• 不要对截图高度做无依据的缩放计算，容易导致内容比例错位、固定位置截断

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