HTML转A4 PDF背景图无法铺满页面问题求助

针对你遇到的内容仅占A4页面部分区域的问题，可按以下步骤修复：

1. 添加PDF页面基础样式 #

先给页面设置A4尺寸的打印规则，同时重置默认边距，确保容器与页面尺寸匹配：

/* 定义PDF页面为A4，匹配96DPI尺寸，移除默认边距 */
@page {
  size: A4;
  margin: 0;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 避免内容溢出导致页面滚动 */
}

#main-content {
  width: 100%;
  height: 100%;
}

#SC_Header {
  width: 794px; /* 96DPI下A4宽度 */
  height: 1122px; /* 96DPI下A4高度 */
  position: relative; /* 作为内部定位元素的参照容器 */
  overflow: hidden; /* 防止内部元素超出容器范围 */
}

.scHeaderBG {
  background-image: url('https://i.pinimg.com/originals/78/a5/da/78a5dac5e6b17cc75722b30c9bfa6df9.png');
  background-size: cover; /* 改为cover让背景图铺满容器，contain会留空白 */
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

2. 修正HTML结构与定位问题 #

你的HTML存在两处关键问题：

• id="main-content xSiyah" 写法错误，id不能包含空格，需改为id="main-content" class="xSiyah"
• 内部元素的relative定位值过大（如top:1230px），导致内容超出容器范围，PDF转换仅会渲染容器内的可见区域

修改后的HTML片段：

<body>
<div id="main-content" class="xSiyah">
    <section id="SC_Header" class="PageBreak break-after scHeaderBG">
        <div class="row">
            <div class="col col-12 text-center">
                <!-- 调整top值，确保元素在容器可见范围内 -->
                <img src="$$MemberImage$$" class="shadow-sm" style="width:220px; height:260px; position: relative; top: 600px" />
                <h3 class="Rb xTuruncu custom-title" style="position: relative; top: 350px;">$$NameSurname$$</h3>
            </div>
        </div>

        <div class="row">
            <!-- 改用absolute定位固定右下角区域，移除无用空p标签 -->
            <div class="col col-12 text-center" style="position:absolute; right: 50px; bottom: 50px;">
                <img src="$$CertificateQRCode$$" style="width:100px; height:100px;" />
                <p class="custom-text">Certificate Number: <strong>$$ApplicationNo$$</strong></p>
                <p class="custom-text">Issued Date: <strong>$$CourseEndDate$$</strong></p>
                <p class="custom-text">Expiry Date: <strong>$$ExpiryDate$$</strong></p>
            </div>
        </div>
    </section>
</div>
</body>

3. 检查PDF转换工具设置 #

如果使用wkhtmltopdf、Puppeteer等工具，需确保：

• 指定DPI为96（比如wkhtmltopdf加参数--dpi 96）
• 禁用自动缩放（比如Puppeteer设置printOptions.scale: 1）
• 不要额外设置页面边距，保持与CSS的@page规则一致

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