如何移除pdfjs-express水印 绑定免费域名授权后水印未消失解决方法

1. 先确认授权密钥配置是否正确 #

大部分配置失效的问题都出在传参时机或参数名错误，React项目中正确的初始化配置示例如下：

import WebViewer from '@pdftron/pdfjs-express-viewer'
import { useEffect, useRef } from 'react'

const PdfViewer = () => {
  const viewerRef = useRef(null)

  useEffect(() => {
    WebViewer({
      path: '/webviewer', // 该路径需和项目public目录下存放pdfjs-express静态资源的路径完全匹配
      licenseKey: '你的免费授权密钥', // 不要携带多余空格、换行符
      // 其他自定义配置项
    }, viewerRef.current).then(instance => {
      // 实例初始化完成后的操作
    })
  }, [])

  return <div ref={viewerRef} style={{ width: '100%', height: '800px' }} />
}

export default PdfViewer

• path参数配置错误会导致授权校验逻辑加载失败，直接出现水印
• 密钥需和官方后台生成的内容完全一致，不要漏复制字符

2. 确认免费密钥的绑定域名匹配 #

免费授权密钥和域名强绑定，需满足以下规则：

• 本地开发时必须将localhost、127.0.0.1添加到申请密钥时的绑定域名列表中，免费版最多支持绑定3个域名
• 生产环境部署的域名必须和申请时填写的域名完全一致，子域名、http/https协议都要完全匹配
• 不要用跨iframe嵌套的方式部署阅读器，嵌套场景会导致域名校验失败

3. 确认依赖包来源正确 #

• 不要使用CDN引入的试用版包，试用版无论是否配置密钥都会保留水印，必须用npm/yarn安装的正式包
• 不要误引入@pdftron/pdfjs-express核心包，要移除水印必须使用@pdftron/pdfjs-express-viewer带授权能力的viewer包，安装命令为：

  npm install @pdftron/pdfjs-express-viewer
  

4. 兜底CSS强制隐藏方案 #

如果以上配置都正确仍出现水印，可以通过全局CSS强制覆盖隐藏水印元素：

/* 适配新版本pdfjs-express水印 */
.__pdfjs-express-watermark {
  display: none !important;
}
/* 适配旧版本textLayer内嵌水印 */
.textLayer > div[style*="opacity: 0"] + div {
  display: none !important;
}

内容的提问来源于stack exchange，提问作者Cory R