叠加层与Prince的平铺图像组成

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不会在分页符之间分割绝对定位的元素，因此，除第一页外，水印在任何页面上都不可见。 建议将水印图像放在页边距框中，然后更改框的位置，以使图像覆盖页面。

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

<!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 （我们是基于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>

叠加层与Prince的平铺图像组成

问题描述

1 个解决方案

解决方案1
0 2016-02-17 17:34:11

叠加层与Prince的平铺图像组成

问题描述

1 个解决方案

解决方案1 0 2016-02-17 17:34:11

解决方案1
0 2016-02-17 17:34:11