Angular中使用jsPdf和Html2Canvas转HTML为PDF的问题排查

我来帮你搞定这个HTML转PDF的问题！你遇到的内容被裁剪、样式丢失的问题，主要是因为硬编码了图片位置/尺寸，以及没有适配canvas和PDF页面的缩放关系，咱们一步步来修复：

问题分析 #

1. 你当前代码里pdf.addImage的参数-182, 0, 208,298是硬编码的偏移和尺寸，这会导致内容被强制裁剪，无法适配完整的表单高度
2. 浏览器打印丢失样式是因为没有配置打印媒体查询的CSS规则
3. html2Canvas默认可能没有捕获完整的滚动区域，需要显式配置参数确保捕获全部内容

解决方案 #

1. 修改TypeScript代码，适配PDF页面缩放 #

替换你的captureScreen方法，动态计算canvas与A4页面的适配比例，避免硬编码：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

public captureScreen() {
  const filename = 'rtgs-form.pdf';
  const content = document.getElementById('contentToConvert');
  
  // 配置html2Canvas参数，确保捕获完整内容并提高清晰度
  html2canvas(content, {
    scale: 2, // 提高缩放比例，生成高清PDF
    scrollX: 0,
    scrollY: 0,
    useCORS: true, // 如果有跨域图片需要开启
    logging: false
  }).then(canvas => {
    // A4纸的尺寸：210mm宽，297mm高
    const pdfWidth = 210;
    const pdfHeight = 297;
    
    // 计算canvas与PDF页面的缩放比例，取宽高中较小的比例，确保内容完整适配
    const scale = Math.min(pdfWidth / canvas.width, pdfHeight / canvas.height);
    
    // 计算缩放后的canvas尺寸
    const scaledWidth = canvas.width * scale;
    const scaledHeight = canvas.height * scale;
    
    // 计算内容在PDF页面的居中位置（可选，也可以设为0,0靠左上）
    const xOffset = (pdfWidth - scaledWidth) / 2;
    const yOffset = (pdfHeight - scaledHeight) / 2;
    
    const pdf = new jsPDF('p', 'mm', 'a4');
    // 添加图片，使用计算后的尺寸和偏移
    pdf.addImage(
      canvas.toDataURL('image/png'),
      'PNG',
      xOffset,
      yOffset,
      scaledWidth,
      scaledHeight
    );
    
    pdf.save(filename);
  });
}

2. 添加打印样式，解决浏览器Ctrl+P丢失样式的问题 #

在你的组件CSS或全局CSS中添加打印媒体查询，确保打印时保留样式：

@media print {
  body * {
    visibility: hidden;
  }
  #contentToConvert, #contentToConvert * {
    visibility: visible;
  }
  #contentToConvert {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
  }
  /* 保留表单的背景色和样式 */
  .form-between-part {
    background-color: #9c9c9c !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* 隐藏打印按钮 */
  button {
    display: none !important;
  }
}

3. 优化HTML结构（可选） #

确保你的表单内容没有超出A4页面的逻辑高度，或者可以通过CSS调整：

• 给#contentToConvert添加最大宽度限制，比如max-width: 210mm; margin: 0 auto;
• 调整表单内元素的字体大小、间距，确保内容能紧凑适配单页

测试效果 #

修改完成后，点击"Print"按钮生成PDF：

• 生成的PDF会完整显示整个表单在单页A4纸上
• 使用Chrome/Firefox的Ctrl+P打印时，也会保留表单的样式，并且内容适配单页

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