pdf.js禁止下载，打印（包括快捷键ctrl+s,ctrl+p）

一、背景与问题

在Web应用中，有时需要对PDF文档进行严格的访问控制。例如在电子合同系统中，用户可能需要查看PDF文档但禁止任何形式的下载或打印。pdf.js作为Mozilla开源的PDF查看器，提供了丰富的功能，但也存在安全控制的挑战。

常见的需求场景包括：

1. 电子文档查看系统
2. 电子发票查看平台
3. 企业内部文档管理系统

核心问题在于：如何在不破坏PDF阅读体验的前提下，实现对下载、打印、快捷键的全面控制。传统方法存在诸多限制，例如：

• 普通用户可通过右键菜单保存
• 打印预览仍可能被触发
• 快捷键Ctrl+S和Ctrl+P可能绕过限制

二、基本原理

pdf.js基于Web技术实现PDF渲染，其核心机制包括：

1. 使用Canvas渲染PDF页面
2. 通过事件监听处理用户交互
3. 提供打印功能的API接口

要实现禁用功能，需要从三个维度进行控制：

1. 拦截用户交互事件（如右键菜单）
2. 拦截浏览器内置的打印功能
3. 拦截快捷键触发的事件

关键挑战在于：pdf.js作为第三方库，其内部事件处理机制相对封闭，需要通过Hook技术或重写默认行为来实现控制。

三、环境准备

确保开发环境包含：

• pdf.js v2.12.100（最新稳定版）
• HTML5 Canvas支持
• 现代浏览器（Chrome/Firefox）

基本项目结构：

/pdf-blocker
  ├── index.html
  ├── viewer.js
  └── viewer.css

四、核心实现

1. 拦截右键菜单事件

// viewer.js
document.addEventListener('contextmenu', function(event) {
  const target = event.target;
  if (target.tagName === 'CANVAS' || target.classList.contains('page')) {
    event.preventDefault();
    console.log('右键菜单被拦截');
  }
});

关键解释：

• 通过监听contextmenu事件覆盖默认的右键菜单
• 判断事件目标是否为PDF页面（Canvas或page类元素）
• 阻止默认行为并记录日志

2. 拦截打印事件

// viewer.js
window.addEventListener('beforeprint', function() {
  console.log('打印前拦截');
  // 可选：动态修改DOM以阻止打印
  const pages = document.querySelectorAll('.page');
  pages.forEach(page => {
    page.style.display = 'none';
  });
});

window.addEventListener('afterprint', function() {
  console.log('打印后恢复');
  const pages = document.querySelectorAll('.page');
  pages.forEach(page => {
    page.style.display = '';
  });
});

关键解释：

• beforeprint事件在打印前触发
• 通过修改CSS样式隐藏PDF页面
• afterprint事件用于恢复显示状态

3. 拦截快捷键事件

// viewer.js
document.addEventListener('keydown', function(event) {
  const isCtrl = event.ctrlKey;
  const isS = event.key === 's';
  const isP = event.key === 'p';
  
  if (isCtrl && (isS || isP)) {
    event.preventDefault();
    console.log(`快捷键 Ctrl+${event.key} 被拦截`);
    // 可选：弹出提示框
    alert('禁止保存和打印操作');
  }
});

关键解释：

• 监听全局键盘事件
• 判断是否触发了Ctrl+S或Ctrl+P
• 阻止默认行为并提示用户

五、完整案例

创建完整的PDF查看器并禁用功能：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>PDF Viewer</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <div id="viewer"></div>
  <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.100/build/pdf.min.js"></script>
  <script src="viewer.js"></script>
</body>
</html>

// viewer.js
const viewer = document.getElementById('viewer');
const pdfjsLib = window['pdfjs-dist'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.100/build/pdf.worker.min.js';

async function loadPDF() {
  const loadingTask = pdfjsLib.getDocument('sample.pdf');
  const pdf = await loadingTask.promise;
  
  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    
    const viewport = page.getViewport({ scale: 1.5 });
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    
    await page.render(renderContext).promise;
    viewer.appendChild(canvas);
  }
}

loadPDF();

关键说明：

• 使用pdfjs-dist的CDN版本
• 创建canvas元素渲染PDF页面
• 拦截所有用户交互事件

六、源码解析

1. 事件监听机制

pdf.js内部通过window.addEventListener注册事件监听器，例如：

window.addEventListener('beforeprint', function() {
  // 内部处理打印逻辑
});

我们通过覆盖这些事件来实现控制。

2. Canvas渲染机制

pdf.js使用Canvas进行PDF渲染，关键代码如下：

const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1.5 });
await page.render({ canvasContext: context, viewport: viewport }).promise;

通过控制canvas元素的可见性，可以间接控制内容访问。

3. 事件冒泡处理

注意事件冒泡机制，需要在事件处理函数中显式调用event.stopPropagation()，例如：

document.addEventListener('contextmenu', function(event) {
  event.stopPropagation();
  // ...
});

七、进阶使用

1. 动态内容过滤

function isAllowedContent(content) {
  return !/(\.pdf|\.docx|\.xlsx)$/.test(content);
}

2. 防止截图

document.addEventListener('keydown', function(event) {
  if (event.key === 's' && event.ctrlKey) {
    event.preventDefault();
    alert('禁止截图操作');
  }
});

3. 安全审计日志

function logSecurityEvent(action, target) {
  console.log(`[Security] ${action} on ${target}`);
}

八、性能与工程实践

1. 性能优化

• 使用防抖处理频繁的事件监听
• 对关键元素进行缓存
• 使用Web Workers处理耗时操作

2. 异常处理

try {
  await loadPDF();
} catch (error) {
  console.error('PDF加载失败:', error);
  alert('无法加载PDF文档');
}

3. 安全加固

• 使用Content Security Policy (CSP)
• 对用户输入进行校验
• 使用HTTPS传输数据

九、常见问题与踩坑

1. 事件未完全覆盖

错误示例：

document.addEventListener('contextmenu', function() {});

问题： 未处理子元素事件冒泡

解决方案：

document.querySelectorAll('canvas').forEach(canvas => {
  canvas.addEventListener('contextmenu', function(event) {
    event.preventDefault();
  });
});

2. 快捷键未生效

错误示例：

document.addEventListener('keydown', function(event) {
  if (event.key === 's') {
    event.preventDefault();
  }
});

问题： 未处理Ctrl键组合

解决方案：

document.addEventListener('keydown', function(event) {
  const isCtrl = event.ctrlKey;
  const isS = event.key === 's';
  if (isCtrl && isS) {
    event.preventDefault();
  }
});

3. 打印预览仍可触发

解决方案：

window.addEventListener('beforeprint', function() {
  const pages = document.querySelectorAll('.page');
  pages.forEach(page => {
    page.style.display = 'none';
  });
});

十、最佳实践

1. 多重防御机制

• 事件监听 + CSP + 防篡改校验
• 限制PDF文件类型
• 使用WebAssembly进行安全校验

2. 安全审计

• 记录所有访问行为
• 设置访问日志保留周期
• 定期检查安全策略有效性

3. 用户提示机制

• 明确提示禁用功能
• 提供替代方案（如在线签名）
• 设置操作限制说明

十一、总结

通过事件监听、CSP策略和Web技术特性，可以实现对pdf.js的全面控制。虽然无法完全防止用户保存PDF文件，但可以有效阻止常见操作。建议在以下场景使用：

• 电子合同系统
• 企业内部文档管理
• 知识产权保护场景

不建议在以下场景使用：

• 需要用户导出PDF的场景
• 需要离线访问的场景
• 需要跨域访问的场景

实际开发中应结合安全审计、用户提示和替代方案，构建完整的安全体系。对于涉及敏感数据的场景，建议结合后端验证和加密存储，实现更完善的保护机制。