gpt4 book ai didi

html - 如何在从包含多个分页前/后的 html 文档转换而来的 pdf 的每一页上重复水印图片?

转载 作者:行者123 更新时间:2023-11-28 01:42:31 25 4
gpt4 key购买 nike

最近,我从 html/CSS 生成了一个很大的 pdf,其中包括几十页。在每个页面上都需要一个 wartermark 图片作为背景,如下所示: watermark picture

我的代码如下:

  • html

<!DOCTYPE html>

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="all">
body {
background: #fff repeat url("watermark.png");
background-size: 100%;
}

div.page {
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>

<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>

</html>

当我使用 Chrome(66.0.3359.139) 将 html 打印为 pdf 时,我得到的 pdf 只有第一页,包括背景中的水印图片: pdf printed by Chrome

当我使用 FireFox(60) 将 html 打印为 pdf 时,我得到了一个没有包含水印图片的页面的 pdf: pdf printed by Firefox

有谁知道如何将水印图片作为背景扩展到从 html/css 生成的 pdf 的每一页?任何帮助将不胜感激!

最佳答案

最后我用一个div把body的内容全部包裹起来,并在这个div上绘制了背景水印图片。它似乎有点缺陷,水印图片没有延伸到最后一页的底部(结果 pdf 图片中的红色圆圈)。任何消除此缺陷的帮助将不胜感激!附加代码如下:

-CSS:

.watermark
{
background: #fff url("watermark.png");
background-size: 100%;
}

-HTML:

<div class="watermark">
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</div>

结果pdf: enter image description here

关于html - 如何在从包含多个分页前/后的 html 文档转换而来的 pdf 的每一页上重复水印图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50366481/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com