1

我有一个文档，我正在使用 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 不会在分页符之间拆分绝对定位的元素，因此水印在除第一页之外的任何页面上都将不可见。有人建议我把水印图片放在页边距框中，然后改变框的位置，使图像覆盖页面。

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

<!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>
4

1 回答 1

0

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

这绝对是 hacky，但我们发现“突破”页边距框的唯一东西是一张大图像。这似乎是在边距框之外扩展您的内容的唯一方法，如果 Prince 在未来的版本中“修复”这个问题，使黑客无法使用，我不会感到惊讶。

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

<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>
于 2016-02-17T17:34:11.653 回答