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

Question

I have a document that I'm converting to PDF using Prince. 我有一个文档，正在使用Prince转换为PDF。 I want to have an overlay that will display a repeating text in demo envrionments so that generated documents can be marked. 我想要一个覆盖层，它将在演示环境中显示重复的文本，以便可以标记生成的文档。

Normally, I would apply such a watermark with an element like 通常，我会将这样的水印与类似

<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, however, doesn't split absolutely positioned elements across page breaks, so the watermark will not be visible on any page apart from the first page. 但是，Prince不会在分页符之间分割绝对定位的元素，因此，除第一页外，水印在任何页面上都不可见。 It was suggested that I put the watermark image in a page margin box, and then change the position of the box so that the image covers the page. 建议将水印图像放在页边距框中，然后更改框的位置，以使图像覆盖页面。

I've tried to do this to partial success, but I don't understand how to change the position of the page margin can so that it covers the whole page (can't make sense of this). 我试图做到这一点以取得部分成功，但是我不明白如何更改页边距的位置，以使其覆盖整个页面（无法理解这一点）。

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

At DocRaptor (we're a Prince-based HTML-to-PDF service), we recently did the same thing to apply watermarks to our test documents. 在DocRaptor （我们是基于Prince的HTML到PDF服务）中，我们最近做了同样的事情将水印应用于测试文档。

It's definitely hacky, but the only thing we found for "breaking out" of the page margin box is a large image. 这肯定是很hacky，但是我们发现“突破”页面边距框的唯一一件事就是一张大图像。 It seemed to be the only way to expand your content outside the margin box, and I wouldn't be surprised if Prince "fixed" this issue, making the hack unusable, in a future version. 这似乎是在边距框外扩展内容的唯一方法，如果Prince在将来的版本中“修复”了这个问题，使黑客无法使用，我也不会感到惊讶。

For your example, it would mean modifying your overlay code to this: 对于您的示例，这意味着将叠加代码修改为：

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

You'd want to fool around with those heights and widths to get your desired size. 您需要四处逛逛这些高度和宽度，以得到所需的尺寸。

Note: Having this image as an overlay may affect (or may not, I'm not sure) the links within your document. 注意：将此图像作为覆盖可能会影响（或可能不会，我不确定）文档中的链接。

We ended up with code that looked like this: 我们最终得到如下代码：

<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