如何使用django-wkhtmltopdf为PDF每页添加静态图片水印

你之前给body设置背景图的方式会让背景拉伸覆盖整个文档高度，而非每页单独渲染。可以通过以下两种方式实现每页独立水印：

方法一：固定定位伪元素实现每页水印 #

修改CSS为以下内容，利用fixed定位让水印在每个页面重复显示：

/* 定义页面尺寸，与wkhtmltopdf的viewport参数匹配 */
@page {
    size: 1366px 513px;
    margin: 0;
}

body {
    position: relative;
    min-height: 100vh; /* 确保body占满单页高度 */
    padding: 20px; /* 可选，避免内容与水印重叠 */
}

/* 用伪元素生成水印，固定定位会让每页都渲染该元素 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("{{ watermark_logos }}");
    background-size: contain; /* 保持图片比例，完整显示在页面内 */
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.2; /* 按需调整水印透明度 */
    z-index: -1; /* 让水印处于内容下方 */
}

方法二：利用@page规则设置每页背景 #

直接通过CSS的@page规则给每个页面单独设置背景：

@page {
    size: 1366px 513px;
    margin: 0;
    background-image: url("{{ watermark_logos }}");
    background-size: contain;
    background-position: center center;
}

body {
    min-height: 100vh;
    padding: 20px;
}

额外注意事项 #

• 确保{{ watermark_logos }}指向的图片路径可被wkhtmltopdf访问，本地图片需保持enable-local-file-access参数开启（你已设置该参数）。
• 若需要水印铺满页面，将background-repeat设为repeat即可。
• 页面尺寸需与wkhtmltopdf的viewport-size保持一致，避免水印错位。

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