如何在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="http://www.srcmini.com/background.jpg" height="100%" width="100%" /> < /div> < main> < !-- The content of your PDF here --> < h2> Hello World< /h2> < /main> < /body> < /html>

我们在Dompdf中的标记将生成如下的PDF:
如何在Dompdf中配置水印

文章图片
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 imageThis 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="http://www.srcmini.com/ocw_logo.png" height="100%" width="100%" /> < /div> < main> < !-- The content of your PDF here --> < h2> Hello World< /h2> < /main> < /body> < /html>

在Dompdf中生成先前的标记将生成如下PDF:
如何在Dompdf中配置水印

文章图片
请注意, 在这两个示例中, 内容的位置, 宽度或高度都不会受到水印的影响, 因为这是水印的重点, 但是背景上设置的图像不会影响你的内容, 但是它将在印象中可见。
注意 由于CSS中的固定规则, 你可以在同一页面中添加许多水印。 Dompdf将自动将相同的固定元素添加到生成的PDF的每一页中。
【如何在Dompdf中配置水印】编码愉快!

    推荐阅读