使用jsPDF+html2canvas生成A4 PDF时出现图片尺寸异常问题

• 优先排查设备像素比（DPR）适配问题：html2canvas默认渲染会匹配当前设备的window.devicePixelRatio，视网膜屏DPR通常为2，会导致生成的canvas实际尺寸是DOM元素逻辑尺寸的2倍，你直接按逻辑尺寸595pt裁剪、导入PDF，自然只能显示左侧1/2的内容，整体视觉上也会放大一倍
• 其次排查尺寸单位匹配问题：A4纸在pt单位下的尺寸是宽595pt、高842pt，你原有代码中存在const TheHeight = doc.internal.pageSize.width; const pdfHeight = TheHeight的逻辑错误，把高度赋值成了宽度值，也会导致内容拉伸变形
• 最后排查html2canvas渲染参数问题：如果没有显式指定scale、width、height参数，html2canvas可能会取到DOM的滚动尺寸而非可见尺寸，也会出现内容截断

核心修改点 #

1. 调用html2canvas时显式指定scale:1，强制固定缩放比例，忽略设备DPR的影响
2. 修正PDF高度计算的逻辑错误，不要把页面宽度赋值给高度，同时预留边距避免内容溢出
3. 简化分页逻辑，通过Y轴偏移实现内容分页，无需额外创建canvas裁剪

修正后完整代码 #

const form = document.querySelector("#theform");
// 固定A4 pt单位标准尺寸
const A4_WIDTH = 595;
const A4_HEIGHT = 842;
// 自定义页面边距
const MARGIN = 10;
const CONTENT_WIDTH = A4_WIDTH - MARGIN * 2;
const CONTENT_HEIGHT = A4_HEIGHT - MARGIN * 2;

html2canvas(form, {
  scale: 1, // 强制缩放比例为1，解决内容放大一倍的核心参数
  useCORS: true, // 存在跨域图片时可开启
  width: form.clientWidth,
  height: form.clientHeight
}).then(function(canvas) {   
  const doc = new jsPDF({   
    unit: 'pt',  
    format: 'a4',  
  });
  // 计算内容宽高比，避免导入PDF时拉伸变形
  const contentRatio = canvas.height / canvas.width;
  const renderHeight = CONTENT_WIDTH * contentRatio;
  // 计算总页数
  const totalPage = Math.ceil(renderHeight / CONTENT_HEIGHT);

  for (let i = 0; i < totalPage; i++) {
    if (i > 0) {
      doc.addPage(A4_WIDTH, A4_HEIGHT); 
    }
    doc.setPage(i+1);
    // 偏移Y坐标实现分页裁剪
    doc.addImage(
      canvas.toDataURL("image/png"), 
      'PNG', 
      MARGIN, 
      MARGIN - i * CONTENT_HEIGHT,
      CONTENT_WIDTH, 
      renderHeight
    );
  }
  doc.autoPrint();
  window.open(doc.output('bloburl'), '_blank'); 
});

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