PDF.js使用示例已解决隐藏打印下载等按钮

1. 适用场景

PDF.js是一个强大的开源JavaScript库，专门用于在网页中渲染和显示PDF文档。当您需要在Web应用中集成PDF查看功能，但又希望控制用户的操作权限时，隐藏打印和下载按钮就显得尤为重要。

该资源特别适用于以下场景：

• 企业内部文档管理系统：保护敏感文档不被随意下载或打印
• 在线教育平台：展示课程资料但限制学生复制传播
• 图书馆电子资源：提供在线阅读但防止大规模下载
• 合同预览系统：允许查看但限制打印和保存
• 知识产权保护：展示文档内容但控制分发渠道

2. 适配系统与环境配置要求

系统要求

• 现代Web浏览器（Chrome、Firefox、Safari、Edge等）
• 支持HTML5和JavaScript的浏览器环境
• 无需额外插件或软件安装

技术栈兼容性

• 支持所有主流前端框架（React、Vue、Angular等）
• 兼容Node.js环境
• 支持TypeScript类型定义
• 可与Webpack、Vite等构建工具集成

部署要求

• 支持静态文件服务的Web服务器
• 无需后端特殊配置
• 跨域资源访问需适当配置

3. 资源使用教程

基本集成步骤

首先引入PDF.js库文件：

<script src="path/to/pdf.js"></script>
<script src="path/to/pdf.worker.js"></script>

自定义查看器配置

创建自定义查看器实例：

// 初始化PDF查看器
const pdfViewer = new PDFViewer({
  container: document.getElementById('viewerContainer'),
  viewer: document.getElementById('viewer')
});

// 隐藏不需要的工具栏按钮
const disableButtons = ['download', 'print', 'openFile'];
disableButtons.forEach(buttonId => {
  const button = document.getElementById(buttonId);
  if (button) {
    button.style.display = 'none';
  }
});

// 或者通过CSS隐藏
<style>
  #download, #print, #openFile {
    display: none !important;
  }
</style>

高级配置选项

// 配置查看器选项
PDFViewerApplicationOptions.set('defaultUrl', 'document.pdf');
PDFViewerApplicationOptions.set('disableAutoFetch', true);
PDFViewerApplicationOptions.set('disableStream', false);

// 事件监听和处理
PDFViewerApplication.eventBus.on('toolbarviewloaded', function() {
  // 工具栏加载完成后执行自定义操作
  customizeToolbar();
});

function customizeToolbar() {
  // 移除或隐藏特定按钮
  const toolbar = document.querySelector('.toolbar');
  const unwantedButtons = toolbar.querySelectorAll('.download, .print');
  unwantedButtons.forEach(btn => btn.remove());
}

4. 常见问题及解决办法

问题1：按钮隐藏后仍然可以通过快捷键操作

解决方案：

// 禁用键盘快捷键
document.addEventListener('keydown', function(event) {
  if (event.ctrlKey || event.metaKey) {
    // 阻止Ctrl+P（打印）和Ctrl+S（保存）
    if (event.key === 'p' || event.key === 's') {
      event.preventDefault();
      return false;
    }
  }
});

问题2：右键菜单仍然提供保存选项

解决方案：

// 禁用右键菜单
document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  return false;
});

// 或者更精细的控制
document.getElementById('viewerContainer').addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

问题3：移动端兼容性问题

解决方案：

// 检测移动设备并相应调整
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // 移动端特定配置
  PDFViewerApplicationOptions.set('disableTextLayer', true);
}

问题4：性能优化

解决方案：

// 配置性能相关选项
PDFViewerApplicationOptions.set('maxImageSize', 1024 * 1024); // 限制图片大小
PDFViewerApplicationOptions.set('disableFontFace', false); // 字体处理
PDFViewerApplicationOptions.set('useOnlyCssZoom', false); // 缩放优化

问题5：安全性和权限控制

解决方案：

// 添加水印保护
function addWatermark() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 水印绘制逻辑
  // ...
}

// 限制页面提取
PDFViewerApplication.eventBus.on('textlayerrendered', function() {
  document.querySelectorAll('.textLayer').forEach(layer => {
    layer.style.userSelect = 'none';
    layer.style.webkitUserSelect = 'none';
  });
});

通过以上配置和方法，您可以有效地控制PDF查看器的功能，保护文档内容的安全，同时为用户提供良好的阅读体验。记得在实际部署前进行充分的测试，确保所有安全措施都能正常工作。