node.js - 如何向 puppeteer 生成的 PDF 添加水印？

Question

我正在使用 puppeteer 为我的报告 View 生成 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 值，以便没有任何内容与其重叠。