jsPDF与html2canvas实现多尺寸PDF适配、解决溢出并提升清晰度

• 横向溢出的核心原因不是scrollX参数设置错误，而是两个逻辑漏洞：
  1. 尺寸取值错误：用clientWidth（DOM可视区宽度）作为PDF页面的宽度基准，但长用户名、大数据表格会撑出横向可滚动区域，这部分真实内容宽度是不被clientWidth统计的，导致canvas和PDF页面实际比内容窄，边缘内容直接被切掉、溢出。
  2. 附加元素硬编码坐标：PDF上的审核人文本、页脚logo全部写死了固定x值（比如450、width-500、width-425），当页面实际宽度变化时，这些固定坐标的元素会直接跑出安全边界。
• 清晰度不足的原因：html2canvas默认按1倍设备像素比生成canvas，没有做高清缩放，图片输出时默认使用0.92的压缩质量，再加上jsPDF对低分辨率图像做拉伸插值，最终输出的PDF会发虚有锯齿。

解决横向内容溢出 #

• 修正尺寸取值逻辑：统一用DOM的scrollWidth/scrollHeight作为内容的真实宽高基准，替代之前的clientWidth/clientHeight，确保所有横向溢出的内容都能被纳入计算范围。
• html2canvas显式绑定截取范围：不依赖默认视口宽度，在配置中显式设置生成canvas的宽度、高度为内容的真实滚动宽高，彻底解决横向内容截不全的问题，之前尝试修改scrollX无效就是因为没有指定canvas的生成宽度。
• 所有PDF上的附加元素全部改成动态坐标计算：
  • 审核人文本通过getTextWidth()计算自身实际宽度，靠右对齐放置，留出固定安全边距，不再硬编码x=450的位置。
  • 页脚的Powered By文本和配套logo根据页面总宽度居中计算偏移量，不再硬写width-500、width-425这类适配固定宽度的坐标值。
  • 左上角银行logo固定在距离页面边缘20px的安全位置，不会随页面宽度变化发生偏移。

提升PDF输出清晰度 #

• 给html2canvas添加scale配置：取设备当前的像素比window.devicePixelRatio，最低按2倍缩放生成canvas，让图像像素密度达到高清屏要求，从根源上避免模糊。
• 图片输出时手动指定1.0的最高质量参数，关闭默认的压缩损耗。
• 保持PDF页面尺寸和canvas内容的尺寸1:1匹配，不让jsPDF对低分辨率图像做拉伸处理，避免插值带来的畸变。

多尺寸业务内容适配 #

• 不再使用固定的PDF页面尺寸模板，每个PDF都根据当前业务内容的真实宽高动态生成页面对应大小，适配不同宽窄、不同高度的业务展示内容。
• 给所有内容留统一的安全边距，不管页面尺寸怎么变化，内容和附加元素都不会贴边、不会溢出。

export const pdfDownloadHandler = (name, div, user) => {
  const input = document.getElementById(div);
  // 取内容真实滚动宽高，而非可视区尺寸
  const contentWidth = input.scrollWidth;
  const contentHeight = input.scrollHeight;
  const safeMargin = 20; // 统一安全边距

  html2canvas(input,{
    scrollX: 0,
    scrollY: 0,
    // 显式按内容真实宽高生成canvas，避免截不全横向内容
    width: contentWidth,
    height: contentHeight,
    windowWidth: contentWidth,
    // 2倍保底缩放，匹配高清屏清晰度要求
    scale: Math.max(window.devicePixelRatio || 1, 2)
  }).then((canvas) => {
    // 最高质量输出JPEG，避免压缩模糊
    const imgData = canvas.toDataURL('image/jpeg', 1.0);
    // 1:1匹配内容尺寸生成PDF，避免拉伸畸变
    const pdf = new jsPDF('p', 'px', [contentWidth, contentHeight]);
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();

    function loadImage(url) {
      return new Promise((resolve) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.src = url;
      })
    }

    // 主业务内容图1:1铺满页面
    pdf.addImage(imgData, 'jpeg', 0, 0, pageWidth, pageHeight);

    // 动态计算审核人文本位置，靠右放置，杜绝溢出
    const reviewText = `Reviewed By Analyst : ${user} on ${new Date().toLocaleString()}`;
    const reviewTextWidth = pdf.getTextWidth(reviewText);
    pdf.text(reviewText, pageWidth - safeMargin - reviewTextWidth, 35);

    // 页脚内容居中动态计算，不再硬编码偏移
    const footerText = "Powered By ";
    const footerTextWidth = pdf.getTextWidth(footerText);
    const solyticsLogoWidth = 90;
    const totalFooterWidth = footerTextWidth + solyticsLogoWidth;
    const footerStartX = (pageWidth - totalFooterWidth) / 2;
    pdf.setFontSize(16);
    pdf.text(footerText, footerStartX, pageHeight - 20);

    loadImage(solytics).then((solyticsLogo) => {
      pdf.addImage(solyticsLogo, "png", footerStartX + footerTextWidth, pageHeight - 35, solyticsLogoWidth, 25);
    });

    loadImage(banklogo).then((bankLogo) => {
      // 左上角固定安全边距放置logo
      pdf.addImage(bankLogo, "png", safeMargin, safeMargin/2, 85, 55);
      pdf.save(`${name}.pdf`);
    });
  });
};

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