srcmini本文概述
使用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：
请注意, 在这两个示例中, 内容的位置, 宽度或高度都不会受到水印的影响, 因为这是水印的重点, 但是背景上设置的图像不会影响你的内容, 但是它将在印象中可见。
注意
由于CSS中的固定规则, 你可以在同一页面中添加许多水印。 Dompdf将自动将相同的固定元素添加到生成的PDF的每一页中。
编码愉快！
评论前必须登录！
注册