如何将水印添加到由puppeteer生成的PDF中？

Question

我正在使用puppeteer为我的报告视图生成PDF文件，我想在该报告PDF版本上添加水印。反正我能做到吗？

Answer 1

最简单的方法是在页面上添加一个附加元素，该元素表示创建PDF时的水印。由于您可以根据自己的喜好更改页面，因此可以向页面添加“水印”元素，如下所示：

await page.evaluate(() => {
  const div = document.createElement('div');
  div.innerHTML = 'Watermark Text...';
  div.style.cssText = "position: fixed; bottom: 10px; right: 10px; background: red; z-index: 10000";
  document.body.appendChild(div);
});
await page.pdf(/* ... */);

代码在页面的右下方添加了一个固定元素。打印时，它将出现在每个打印的页面上。您可以使用任何类型的CSS样式来设置水印样式。只要确保它具有较高的z-index值，就可以确保没有重叠的内容。