pdf.js 官方库本身不支持运行时添加水印，因其定位是轻量级 pdf 渲染器而非文档编辑工具；若需水印效果，应通过服务端预处理 pdf 或在 canvas 渲染层叠加 dom 元素实现。

pdf.js 官方库本身不支持运行时添加水印，因其定位是轻量级 pdf 渲染器而非文档编辑工具；若需水印效果，应通过服务端预处理 pdf 或在 canvas 渲染层叠加 dom 元素实现。

PDF.js 是 Mozilla 开发的基于 HTML5 的开源 PDF 查看器，核心目标是高保真、高性能地渲染 PDF 内容，而非修改或增强 PDF 文档结构。正如其官方 GitHub 仓库多次明确声明（如 issue #14366），水印（尤其是嵌入式、语义化水印）不属于 PDF.js 的设计范畴。因此，调用类似 pageView.setWatermark() 的方法会直接报错：TypeError: pageView.setWatermark is not a function——因为该 API 根本不存在。

✅ 可行的替代方案

方案一：服务端预加水印（推荐，安全可靠）

在 PDF 文件送达前端前，使用后端工具（如 Apache PDFBox、iText、PyPDF2 或商业 SDK）将水印作为透明图层嵌入每页。例如，Java 中使用 PDFBox 添加倾斜文字水印：

// 示例：PDFBox 添加半透明斜向水印（需引入 org.apache.pdfbox:pdfbox）
PDDocument doc = PDDocument.load(new File("input.pdf"));
PDPage page = doc.getPage(0);
PDPageContentStream contentStream = new PDPageContentStream(doc, page, AppendMode.APPEND, true);
contentStream.beginText();
contentStream.setFont(PDType1Font.HELVETICA_BOLD, 60);
contentStream.setNonStrokingColor(200, 200, 200, 80); // RGBA: 灰色 + 低透明度
contentStream.setTextMatrix(AffineTransform.getRotateInstance(Math.toRadians(45), 300, 400));
contentStream.showText("CONFIDENTIAL");
contentStream.endText();
contentStream.close();
doc.save("watermarked.pdf");
doc.close();

✅ 优势：水印真正融入 PDF 流，兼容打印、复制、无障碍阅读；❌ 缺点：需额外服务端处理与存储开销。

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

方案二：前端 Canvas 层叠渲染（轻量、即时，但非原生 PDF 水印）

利用 PDF.js 渲染出的 元素，在其上方绝对定位一个带水印样式的

，通过 CSS 实现视觉覆盖（注意：此水印不参与 PDF 导出或打印，仅用于屏幕预览）：

<div class="pdf-container" style="position: relative;">
  <canvas id="pdf-canvas"></canvas><div class="watermark-overlay" style="
         position: absolute;
         top: 0; left: 0; width: 100%; height: 100%;
         display: flex; align-items: center; justify-content: center;
         pointer-events: none;
         font-size: 48px; font-weight: bold;
         color: rgba(0, 0, 0, 0.1);
         transform: rotate(-30deg);
         z-index: 10;
       ">
    CONFIDENTIAL
  </div>
</div>

⚠️ 注意事项：

• 此方式仅影响用户视觉预览，导出 PDF、打印或截图时水印不会保留；
• 需监听 pageView.render() 完成事件，确保 overlay 尺寸与 canvas 同步；
• 移动端需额外适配 transform-origin 和响应式字体大小。

方案三：商业 SDK（如 Apryse PDF.js Express）

若项目预算允许且需企业级功能（如动态水印策略、权限控制、数字签名集成），可考虑 Apryse（原 PDFTron）提供的 PDF.js Express Viewer，它在 PDF.js 基础上扩展了水印、注释、表单等高级能力。

⚠️ 重要提醒

• 电子水印 ≠ 安全防护：无论采用哪种方式，前端渲染层水印均可被截图绕过；真正敏感文档应结合访问控制、DRM、服务端动态生成等综合手段。
• 无障碍与可读性：过度遮盖内容或使用低对比度水印会损害屏幕阅读器体验和色觉障碍用户访问，建议遵循 WCAG 2.1 对对比度（≥ 4.5:1）和非干扰性的要求。

综上，PDF.js 不提供水印能力是刻意为之的设计取舍。开发者应根据实际场景选择：追求可靠性选服务端预处理；追求快速原型选前端 overlay；追求一体化文档工作流则评估专业商业 SDK。