如何在 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 值，以免与它重叠。