如何在 PDF.js 中添加水印：技术限制与替代方案详解-js教程-PHP中文网

pdf.js 本身不支持运行时动态添加水印，因其定位是轻量级 pdf 渲染器而非文档编辑工具；若需水印效果，应优先在服务端预处理 pdf，或选用支持水印的商业 sdk。

pdf.js 本身不支持运行时动态添加水印，因其定位是轻量级 pdf 渲染器而非文档编辑工具；若需水印效果，应优先在服务端预处理 pdf，或选用支持水印的商业 sdk。

PDF.js 是 Mozilla 开发的开源 HTML5 PDF 渲染库，核心目标是高保真、高性能地显示 PDF 内容，而非编辑或增强文档内容。因此，它原生不提供 setWatermark() 或任何类似 API——你调用 pageView.setWatermark(...) 时出现 TypeError: pageView.setWatermark is not a function 是预期行为，而非使用错误。

官方 GitHub 仓库已多次明确回应此类需求（如 Issue #14366）：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

“That's not a use-case that this library is intended for.”
PDF.js 的设计哲学是专注渲染，避免引入可能影响可访问性（如屏幕阅读器解析）、打印质量、文本提取（OCR/DDA）或文件结构稳定性的功能。水印（尤其是半透明斜向文字）常导致文本层遮挡、复制粘贴异常、PDF/A 合规性失效等问题，故被主动排除在功能范围之外。

✅ 可行替代方案（按推荐优先级排序）：

服务端预加水印（推荐）
在 PDF 文件交付给前端前，使用后端库为其添加水印。例如在 Java 应用中集成 Apache 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-like (alpha ≈ 0.3)
contentStream.setTextRotation(Math.toRadians(45), 300, 400);
contentStream.showText("CONFIDENTIAL");
contentStream.endText();
contentStream.close();

doc.save("watermarked.pdf");
doc.close();

✅ 优势：水印为真实 PDF 内容，兼容所有阅读器；不影响 PDF.js 渲染逻辑；符合可访问性标准。
⚠️ 注意：需确保水印坐标适配页面尺寸（建议遍历所有页并动态计算中心点）。

前端叠加 DOM 水印（仅视觉层）
若仅需 UI 层示意（非 PDF 内容），可在 PDF.js 渲染容器上绝对定位一个

实现覆盖水印：

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

✅ 优势：零服务端修改，快速验证。
❌ 局限：水印不随缩放/滚动自适应；不包含在导出/打印中；可能被截图绕过；不符合安全合规要求。

采用商业 SDK（如 Apryse PDF.js）
Apryse（原 PDFTron）提供的 PDF.js Viewer 支持声明式水印配置：
```
const viewerElement = document.getElementById('viewer');
const viewer = new PDFJSExpress.Viewer(viewerElement, {
  initialDoc: 'doc.pdf',
  watermarks: [{
    text: 'CONFIDENTIAL',
    fontSize: 72,
    opacity: 0.15,
    rotation: -45,
    position: { x: '50%', y: '50%' }
  }]
});
```
✅ 优势：开箱即用、跨平台一致、支持动态更新。
⚠️ 注意：需商业授权；水印仍属客户端渲染，敏感场景仍建议服务端固化。