CSS阻止网页打印生效但PDF无效，求阻止PDF打印的方法

你用的CSS打印媒体查询仅对HTML页面生效，浏览器内嵌的PDF是由独立的PDF渲染引擎处理的，不属于HTML DOM范畴，所以CSS规则无法影响到它。下面是几种前端层面的解决方案：

• 覆盖PDF渲染区域
  通过添加一个全屏遮挡层，在打印时隐藏PDF所在区域，只显示遮挡层：

  <style>
  /* 打印时隐藏所有非遮挡层元素 */
  @media print {
    body > *:not(.print-blocker) { 
      display: none !important; 
    }
  }
  /* 全屏遮挡层样式 */
  .print-blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 9999;
  }
  </style>
  <!-- 插入遮挡层元素 -->
  <div class="print-blocker"></div>
  

  原理是打印时让PDF内容被完全遮挡，最终打印输出只有空白的遮挡层。

• 阻止打印触发事件
  通过JavaScript监听打印相关事件和快捷键，从交互层面阻止打印操作：

  // 拦截打印前事件
  window.addEventListener('beforeprint', function(event) {
    event.preventDefault();
    alert('打印功能已禁用');
  });
  
  // 阻止Ctrl+P/Command+P快捷键
  document.addEventListener('keydown', function(event) {
    if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
      event.preventDefault();
      alert('打印功能已禁用');
    }
  });
  

  注意：这种方法只能拦截常规的打印触发方式，用户如果直接在PDF内嵌控件的右键菜单里选择打印，或者禁用JavaScript后操作，还是可以绕开限制。

重要提示：以上都是前端层面的限制手段，无法彻底阻止技术能力较强的用户（比如直接下载PDF文件后打印）。如果要完全禁止PDF的打印权限，需要在生成PDF文件时就设置加密和打印限制，这属于后端文件处理的范畴，前端无法实现。

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