如何以高分辨率将React组件导出为PDF文件？

问题描述 #

用React开发瓶贴制作应用，支持用户自定义创建标签，已基于html2canvas与jsPDF实现PDF导出功能，但存在分辨率缺陷：导出的PDF放大后画质模糊（目标组件尺寸为380px*380px）；但将Chrome浏览器手动放大至500%后再导出，PDF在阅读器（Foxit Reader或Chrome PDF Viewer）中放大后画质良好，推测导出分辨率与组件渲染尺寸直接相关。希望通过代码实现高分辨率PDF导出，无需用户手动调整浏览器缩放。

解决方案 #

核心思路是提升canvas的渲染分辨率，通过代码层面的缩放设置，模拟浏览器放大的效果，最终生成高清晰的PDF文件，以下是两种可行实现方式：

方式一：使用html2canvas的scale参数（推荐） #

直接通过html2canvas的scale配置项，让组件以更高分辨率渲染为canvas，再将高分辨率图片按原尺寸添加到PDF中：

const printRef = React.useRef<HTMLDivElement>(null);

// ... 其他组件逻辑

const handleDownloadPdf = async () => {
  const element = printRef.current;
  if (!element) return;

  // 设置缩放倍数，对应浏览器500%放大效果可设为5
  const scale = 5;
  const canvas = await html2canvas(element, {
    scale: scale,
    useCORS: true, // 若组件包含跨域图片需开启
    logging: false // 关闭日志输出
  });
  const data = canvas.toDataURL("image/png");
  
  // PDF页面尺寸保持原组件的380px*380px
  const pdf = new jsPDF("portrait", "px", [380, 380]);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();

  // 将高分辨率图片按原尺寸嵌入PDF
  pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
  pdf.save("label.pdf");
};

// ... 组件渲染部分
<div ref={printRef} style={{ width: "380px", height: "380px" }}>
    <Label/>
</div>

说明：scale参数会让html2canvas以指定倍数渲染目标元素，生成的canvas分辨率为原元素的scale倍，嵌入PDF后即使放大也不会出现模糊，全程无需用户操作浏览器。

方式二：临时放大目标元素尺寸 #

若scale参数未生效，可通过临时修改组件的CSS尺寸实现高分辨率渲染，完成后恢复原尺寸：

const handleDownloadPdf = async () => {
  const element = printRef.current;
  if (!element) return;

  const scale = 5;
  // 保存组件原尺寸
  const originalWidth = element.style.width;
  const originalHeight = element.style.height;
  
  // 临时将组件放大scale倍
  element.style.width = `${380 * scale}px`;
  element.style.height = `${380 * scale}px`;

  const canvas = await html2canvas(element);
  const data = canvas.toDataURL("image/png");
  
  // 恢复组件原尺寸，避免影响界面显示
  element.style.width = originalWidth;
  element.style.height = originalHeight;
  
  const pdf = new jsPDF("portrait", "px", [380, 380]);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();

  pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
  pdf.save("label.pdf");
};

说明：该方式通过临时调整组件的显示尺寸来提升渲染分辨率，用户不会感知到界面变化，适合某些特殊场景下scale参数不生效的情况。

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