如何在Dompdf中配置水印

本文概述

A.整页水印(商务信笺)
B.自定义页面水印

使用Dompdf配置水印不是一件容易的事, 也不是直观的任务, 特别是如果你牢记在PDF中实现水印的可能性很多。忽略HTML和CSS与PDF格式无关的事实, 这要归功于Dompdf(PHP的CSS兼容PDF生成器), 你将能够使用上述语言生成PDF。即使有这个优点, 仍然很难知道如何添加水印。因此, 在本文中, 我们将向你展示如何使用Dompdf库在PDF中配置两种最基本的水印行为。

A.整页水印(商务信笺)

如果要为每个页面设置背景图像, 则需要按照特定格式构建标记, 该格式允许你添加顶部和底部页边距而不会弄乱PDF的布局。首先, 你需要将整个PDF的页边距设置为0, 这将允许你设置全角和全角(纸张尺寸相同)的背景图像。接下来, 你需要将PDF的所有内容包装在一个主标记中, 这没有任何CSS规则。你还需要, 现在该页面没有任何边距, 请将它们应用于正文(在本例中为我们的pdf页面)。最后, 本教程最重要的部分是PDF的水印。水印必须是固定的div元素, Dompdf中的固定元素会出现在PDF的每一页上, 因此你只需要根据需要为此元素指定其大小和边距。该div包含一个img, 该img带有你想要的图像作为背景, 并将其高度和宽度设置为100％。

在此示例中, 我们将一个大小为2554x3310px的jpg图像作为背景, 因此我们的标记和样式如下所示：

注意

将水印对象的z-index属性设置为负值很重要, 以防止其覆盖PDF的内容。

<html>
    <head>
        <style>
            /** 
            * Set the margins of the PDF to 0
            * so the background image will cover the entire page.
            **/
            @page {
                margin: 0cm 0cm;
            }

            /**
            * Define the real margins of the content of your PDF
            * Here you will fix the margins of the header and footer
            * Of your background image.
            **/
            body {
                margin-top:    3.5cm;
                margin-bottom: 1cm;
                margin-left:   1cm;
                margin-right:  1cm;
            }

            /** 
            * Define the width, height, margins and position of the watermark.
            **/
            #watermark {
                position: fixed;
                bottom:   0px;
                left:     0px;
                /** The width and height may change 
                    according to the dimensions of your letterhead
                **/
                width:    21.8cm;
                height:   28cm;

                /** Your watermark should be behind every content**/
                z-index:  -1000;
            }
        </style>
    </head>
    <body>
        <div id="watermark">
            <img src="background.jpg" height="100%" width="100%" />
        </div>

        <main> 
            <!-- The content of your PDF here -->

            <h2>Hello World</h2>
        </main>
    </body>
</html>

我们在Dompdf中的标记将生成如下的PDF：

B.自定义页面水印

如果你的水印不需要覆盖整个页面, 则意味着可以在页面正文的特定区域内绘制图像。遵循整个页面中水印的相同逻辑, 你需要创建一个带有负Z索引的固定div。在div内, 你需要添加具有完整高度和宽度的img标签, 因为这会占用与水印div相同的大小。你可以使用CSS指定水印的尺寸以及其水平和垂直位置。该水印的位置完全由你决定, 在本示例中, 我们将使用以下标记在页面中间添加”我们的代码世界”的徽标：

<html>
    <head>
        <style>
            /** 
            * Define the width, height, margins and position of the watermark.
            **/
            #watermark {
                position: fixed;

                /** 
                    Set a position in the page for your image
                    This should center it vertically
                **/
                bottom:   10cm;
                left:     5.5cm;

                /** Change image dimensions**/
                width:    8cm;
                height:   8cm;

                /** Your watermark should be behind every content**/
                z-index:  -1000;
            }
        </style>
    </head>
    <body>
        <div id="watermark">
            <img src="ocw_logo.png" height="100%" width="100%" />
        </div>

        <main> 
            <!-- The content of your PDF here -->

            <h2>Hello World</h2>
        </main>
    </body>
</html>

在Dompdf中生成先前的标记将生成如下PDF：