Angular/JS中右键打印事件拦截函数实现方法咨询

核心实现逻辑 #

所有浏览器触发打印的操作（包括右键菜单打印、浏览器设置页打印、快捷键打印）都会触发beforeprint事件，监听该事件即可覆盖全场景打印拦截。

• 全场景打印拦截代码（在原有代码基础上新增即可）

// 组件类中先定义事件处理函数变量，方便销毁时移除
private keydownHandler: (e: KeyboardEvent) => void;
private keyupHandler: (e: KeyboardEvent) => void;
private beforeprintHandler: (e: Event) => void;
private contextmenuHandler: (e: MouseEvent) => void;

ngOnInit(): void {
  // 原有Ctrl+P拦截逻辑
  this.keydownHandler = (e) => {
    if (e.ctrlKey && e.key === 'p') {
      e.preventDefault();
      e.stopPropagation();
      this.prtScrEvent("Screenshot");
    }
  };
  document.addEventListener('keydown', this.keydownHandler);

  // 原有PrintScreen键拦截逻辑，兼容新旧标准判断
  this.keyupHandler = (e) => {
    if (e.keyCode === 44 || e.key === 'PrintScreen') {
      e.preventDefault();
      this.prtScrEvent("Screenshot");
    }
  };
  window.addEventListener("keyup", this.keyupHandler);

  // 新增：全场景打印拦截，覆盖右键打印、浏览器菜单打印等所有触发路径
  this.beforeprintHandler = (e) => {
    e.preventDefault();
    // 强制终止打印流程
    window.stop();
    alert('当前页面禁止打印或导出为PDF');
    this.prtScrEvent("Screenshot");
  };
  window.addEventListener('beforeprint', this.beforeprintHandler);

  // 可选：禁用默认右键菜单，进一步降低用户触发右键打印的概率
  this.contextmenuHandler = (e) => {
    e.preventDefault();
  };
  document.addEventListener('contextmenu', this.contextmenuHandler);
}

// 组件销毁时移除所有事件监听，避免内存泄漏
ngOnDestroy(): void {
  document.removeEventListener('keydown', this.keydownHandler);
  window.removeEventListener('keyup', this.keyupHandler);
  window.removeEventListener('beforeprint', this.beforeprintHandler);
  document.removeEventListener('contextmenu', this.contextmenuHandler);
}

async prtScrEvent(status) {
  // 你的原有业务逻辑
}

注意事项 #

前端层面的拦截仅能提升违规操作的成本，无法做到绝对拦截，用户仍可通过系统级截屏工具、浏览器控制台执行代码等方式绕过限制，敏感内容建议额外添加水印、服务端做权限管控和脱敏处理

内容的提问来源于stack exchange，提问作者Ashwin S E