Question

我有一份文件，我正在使用Prince转换为PDF。我希望有一个叠加层，它将在演示环境中显示重复文本，以便标记生成的文档。

通常，我会使用像

这样的元素来应用这样的水印

<div id='overlay' style='position: absolute; top: 0; left: 0; background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%;'></div>

但是，Prince不会在分页符之间拆分绝对定位的元素，因此除了第一页之外的任何页面上都不会显示水印。 It was suggested我将水印图像放在页边框中，然后更改框的位置，使图像覆盖页面。

我试图这样做是为了取得部分成功，但我不明白如何更改页面边距的位置可以使它覆盖整个页面（无法理解这一点）。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
@page       { size: A4; margin: 25mm 8mm 27mm 8mm; padding: 0 0 0 0; @top { content: flow(header) } }
body        { margin:16mm; padding: 0; }
#overlay    { flow: static(header); background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%; }
    </style>
</head>
<body>
    <div id='overlay'></div>
    <p>Lorem ipsum...</p> <!-- multiple instances -->
</body>
</html>

Answer 1

在DocRaptor（我们是基于王子的HTML到PDF服务），我们最近对我们的测试文档应用水印做了同样的事情。

这绝对是hacky，但我们发现的唯一一件事就是＆＃34;爆发＆＃34;页边距框是一个大图像。这似乎是在边距框外扩展内容的唯一方法，如果Prince＆＃34;修复＆＃34;我不会感到惊讶。这个问题，在将来的版本中使黑客无法使用。

对于您的示例，这意味着将您的重叠代码修改为：

<div id='overlay'><img src='blank.png' width='3000' height='3000'></div>

你想要愚弄那些高度和宽度以获得你想要的尺寸。

注意：将此图片作为叠加层可能会影响（或可能不会，我不确定）文档中的链接。

我们最终得到的代码如下：

<div id='overlay'>
   <img src='blank.png' width='3000' height='3000'>
   <div style='position: absolute; bottom: 0; left: 0; top: 0; right: 0; background-repeat: repeat-x; background-image: url(background.png); background-size: 570px 11px; background-position: 0 8px;'></div>
</div>

覆盖由王子

1 个答案: