如何禁止嵌入式PDF的右键操作并禁用CTRL+S快捷键

我完全理解你的处境——客户态度坚决，哪怕知道这种方式没法彻底阻止文件下载，也得按要求来。之前你遇到的禁用右键后PDF无法滚动的问题，大概率是因为直接给embed元素或全局绑定了右键阻止事件，干扰了浏览器PDF插件的原生交互。下面给你两个针对性的方案，亲测能避免滚动失效的问题：

方案一：透明覆盖层拦截右键（推荐） #

这个方法的核心是用一个透明的div覆盖在embed上方，专门拦截右键事件，让PDF插件的原生滚动、缩放等操作不受影响。

1. HTML结构 #

<div class="pdf-wrapper">
  <!-- 你的PDF嵌入标签 -->
  <embed src="your-document.pdf" type="application/pdf" width="100%" height="100%">
  <!-- 透明覆盖层，用于拦截右键 -->
  <div class="pdf-overlay"></div>
</div>

2. CSS样式 #

确保覆盖层完全覆盖PDF区域，且不影响视觉：

.pdf-wrapper {
  position: relative;
  width: 100%;
  height: 600px; /* 根据你的页面需求调整高度 */
}

.pdf-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pdf-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 10; /* 确保在PDF上方 */
}

3. JavaScript逻辑 #

• 拦截覆盖层的右键菜单
• 禁用Ctrl+S（可选择全局或仅PDF区域生效）

// 拦截覆盖层的右键事件
document.querySelector('.pdf-overlay').addEventListener('contextmenu', (e) => {
  e.preventDefault();
  // 可选：给用户提示，比如
  // alert('右键菜单已禁用，无法直接保存PDF');
});

// 仅在PDF区域禁用Ctrl+S（推荐，不影响页面其他功能）
document.addEventListener('keydown', (e) => {
  const pdfWrapper = document.querySelector('.pdf-wrapper');
  // 检查是否是Ctrl+S，且触发事件的元素在PDF容器内
  if (e.ctrlKey && e.key.toLowerCase() === 's' && pdfWrapper.contains(e.target)) {
    e.preventDefault();
    e.stopPropagation();
    // 可选：提示用户
    // alert('PDF保存功能已禁用');
  }
});

方案二：精准拦截右键事件（无覆盖层） #

如果不想用覆盖层，可以通过判断右键点击的目标来精准阻止，避免干扰PDF的原生交互：

// 全局监听右键事件，但仅在点击PDF容器或embed时阻止
document.addEventListener('contextmenu', (e) => {
  const pdfWrapper = document.querySelector('.pdf-wrapper');
  if (pdfWrapper.contains(e.target) || e.target.tagName === 'EMBED') {
    e.preventDefault();
  }
});

// 禁用Ctrl+S的逻辑和方案一一致

注意事项 #

• 局限性说明：务必提前跟客户明确，这种方法只能阻止普通用户的操作，懂技术的用户依然可以通过浏览器开发者工具找到PDF的原始URL，或使用第三方工具下载。
• 浏览器兼容性：不同浏览器的PDF插件行为略有差异，建议在Chrome、Firefox、Edge等主流浏览器测试效果。
• 用户体验：如果禁用右键和Ctrl+S，最好给用户明确的提示，避免用户困惑。

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