PDFKit生成证书内容缩至左上角，如何让内容铺满PDF页面？

首先看你当前的配置，页面尺寸设置得有些夸张（84.02cm × 118.8cm），这大概率是导致内容缩放异常的核心原因之一。咱们从几个关键维度逐步调整：

1. 修正页面尺寸，优先用标准尺寸 #

证书常用的标准尺寸比如A3横向（A3原尺寸29.7cm×42cm，横向则为42cm×29.7cm），先换成标准尺寸试试，避免自定义尺寸引发的渲染适配问题：

PDFKit.configure do |config|
  config.default_options = {
    encoding: 'UTF-8',
    disable_smart_shrinking: true,
    # 换成标准A3横向，也可根据你的证书实际尺寸调整
    page_size: 'A3',
    orientation: 'Landscape',
    margin_bottom: 0,
    margin_top: 0,
    margin_left: 0,
    margin_right: 0,
    # 添加300dpi参数，适配印刷级证书的渲染精度
    dpi: 300
  }
end

如果你的证书是自定义尺寸，务必保证page_width和page_height的数值是真实的物理尺寸（比如A4横向是29.7cm×21cm），数值错误会导致页面过大，内容被强制缩小适配。

2. 添加viewport参数，强制内容铺满页面 #

webkit渲染引擎有时会默认使用viewport缩放规则，咱们可以通过viewport-size参数强制内容匹配页面宽度：

PDFKit.configure do |config|
  config.default_options = {
    encoding: 'UTF-8',
    disable_smart_shrinking: true,
    page_size: 'A3',
    orientation: 'Landscape',
    margin_bottom: 0,
    margin_top: 0,
    margin_left: 0,
    margin_right: 0,
    dpi: 300,
    # 强制viewport匹配A3横向的宽度（42cm=420mm），单位要和页面尺寸统一
    'viewport-size': '420mm'
  }
end

3. 检查HTML/CSS的适配逻辑 #

如果配置调整后仍有问题，要排查证书HTML内容的CSS设置：

• 确保根容器（比如<body>或证书外层div）的宽高设为100%，或直接匹配页面实际尺寸（比如width: 42cm; height:29.7cm;）
• 不要给内容设置固定缩小比例、max-width或max-height限制
• 用position: absolute或flex布局让内容完全填充容器，避免留白

4. 确认关键缩放选项已禁用 #

你已经设置了disable_smart_shrinking: true，这个选项是阻止wkhtmltopdf自动缩小内容适配页面的核心，务必保留。如果仍有内容截断，可尝试添加enable-local-file-access参数（若内容引用了本地资源），或用zoom: 1.2这类参数微调内容大小，但优先保证页面尺寸和viewport的匹配度。

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