如何向 puppeteer 生成的 PDF 添加水印？

Question

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

Answer 1

最简单的方法是向页面添加一个附加元素，它代表创建 PDF 时的水印。由于您可以按照自己喜欢的任何方式更改页面，因此可以向页面添加一个 "Watermark" 元素，如下所示：

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 值，这样就不会与它重叠。