使用Grover/Puppeteer生成300DPI印刷PDF卡遇144DPI瓶颈求助

核心逻辑 #

Puppeteer默认以96DPI渲染页面，要输出300DPI的印刷级PDF，需按300/96=3.125的比例放大渲染尺寸，再通过CSS精确控制最终PDF的物理尺寸，同时适配出血边要求。

具体调整步骤 #

1. Grover配置参数修正 #

调整视口、缩放比例及印刷相关参数，确保渲染精度：

grover_options = {
  viewport: {
    width: (2.25 * 300).to_i,  # 出血后宽度转像素：2.25英寸 × 300DPI
    height: (3.75 * 300).to_i, # 出血后高度转像素：3.75英寸 × 300DPI
    device_scale_factor: 1
  },
  scale: 3.125,                # 96DPI转300DPI的精确缩放比例
  media_type: 'print',         # 启用印刷媒体样式
  print_background: true,      # 保留背景色/图片
  prefer_css_page_size: true   # 优先遵循CSS @page的尺寸设置
}

2. CSS @page规则优化 #

明确PDF物理尺寸与出血边适配：

@page {
  size: 2.25in 3.75in;  /* 含出血边的最终PDF尺寸 */
  margin: 0;             /* 清除默认边距，避免内容偏移 */
}

.card-content {
  width: 2.25in;
  height: 3.75in;
  box-sizing: border-box;
  padding: 0.125in;      /* 出血边宽度：(2.25-2)/2 = 0.125英寸 */
  /* 卡片内容样式 */
}

3. 内容适配要点 #

• 元素尺寸优先用in或基于300DPI的px（1英寸=300像素），避免相对单位导致缩放误差
• 图片资源需保证原生分辨率≥300DPI，防止放大后模糊
• 确认print_background参数开启，否则背景元素不会被渲染到PDF中

验证方式 #

生成PDF后，用Adobe Acrobat等工具查看文档属性，确认分辨率为300DPI，同时测量物理尺寸是否符合2.25in×3.75in的要求。

内容的提问来源于stack exchange，提问作者James St-Pierre