使用Html2canvas和jspdf生成网页PDF画质不佳的解决方法咨询

嘿，我完全明白生成清晰的PDF对你有多重要——画质模糊确实让人头疼。别担心，咱们从addImage()的参数调整，到html2canvas的核心配置，再到一些进阶技巧，一步步解决这个问题：

addImage()的参数设置直接影响PDF里图片的清晰度，重点关注这几点：

• 优先使用PNG格式：JPG是有损压缩，会丢失细节，而PNG是无损格式，能完整保留canvas的画质。调用时明确指定格式：

  pdf.addImage(canvas, 'PNG', x, y, targetWidth, targetHeight);
  

• 匹配缩放比例与PDF的DPI：默认PDF的DPI是72，而屏幕的DPI通常是96。你可以先把canvas放大1.33倍（96/72），再在addImage()时缩小回原尺寸，这样能抵消DPI差异带来的模糊。更简单的是直接给canvas设置2倍缩放（兼顾画质和文件大小），然后按比例计算PDF中的尺寸：

  // 先生成高分辨率canvas
  const canvas = await html2canvas(document.body, { scale: 2 });
  // 计算A4尺寸下的图片高度（单位：mm）
  const imgWidth = 210; // A4宽度
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  // 添加到PDF
  pdf.addImage(canvas, 'PNG', 0, 0, imgWidth, imgHeight);
  

canvas的分辨率是PDF画质的基础，这些参数一定要重视：

• 提高scale值：这是提升画质最直接的方法。scale代表canvas的缩放比例，值越大，分辨率越高。一般设为2就足够清晰，设为3画质更好但会增加文件大小，按需调整：

  const canvas = await html2canvas(document.querySelector('.pdf-content'), {
    scale: 2, // 2倍缩放，平衡画质与性能
    useCORS: true, // 如果页面有跨域图片，必须开启这个
    allowTaint: true, // 配合useCORS处理跨域资源
    logging: false // 关闭日志，提升渲染速度
  });
  

• 处理跨域图片：如果页面包含外部域名的图片，html2canvas可能无法正确渲染（导致模糊或空白），必须开启useCORS和allowTaint，同时确保图片服务器配置了CORS允许你的域名访问。
• 避免CSS transform导致的模糊：如果页面元素用了transform: scale()这类缩放样式，html2canvas渲染时可能会出现模糊，尽量用固定尺寸替代缩放，或者在渲染前移除这类样式。

• 用SVG替代位图：页面中的图标、插图尽量用SVG格式，SVG是矢量图，缩放时不会失真，能大幅提升PDF中的图形清晰度。
• 匹配页面与PDF尺寸：给要渲染的容器设置和PDF一致的尺寸（比如A4的210mm宽），减少渲染后的缩放操作，避免模糊。比如：

  .pdf-content {
    width: 210mm;
    margin: 0 auto;
    padding: 15mm;
  }
  

• 分块渲染长页面：如果页面很长，一次性渲染可能导致内存不足，进而影响画质。可以把页面分成多个区块，分别生成canvas后依次添加到PDF中。

这些方法应该能帮你解决画质差的问题，你可以先从调整scale参数和addImage()的格式开始尝试，根据实际效果微调参数。

内容的提问来源于stack exchange，提问作者S. Ensiye Kiyamousavi