本文概述
- A.整页水印(商务信笺)
- B.自定义页面水印
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:
文章图片
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:
文章图片
请注意, 在这两个示例中, 内容的位置, 宽度或高度都不会受到水印的影响, 因为这是水印的重点, 但是背景上设置的图像不会影响你的内容, 但是它将在印象中可见。
注意 由于CSS中的固定规则, 你可以在同一页面中添加许多水印。 Dompdf将自动将相同的固定元素添加到生成的PDF的每一页中。
【如何在Dompdf中配置水印】编码愉快!
推荐阅读
- 如何在Dompdf中配置页眉和页脚
- 如何在Netbeans中添加对Markdown的支持
- 你需要了解的所有响应式Web设计统计信息
- 如何使用命令行创建MySQL数据库并为用户设置权限
- 如何从命令行更改MySQL用户的密码
- 如何使用CLI在Plesk Web Admin中更改域的最大磁盘空间和流量
- 如何在Ubuntu 16.04中重置MySQL 5.7 root密码
- 如何使用Plesk在MySQL CLI中以root(管理员)用户身份登录
- JavaScript|JS之DOM操作元素2