Angular 14中禁用PrintScreen功能的可行方案技术求助

你提到的这个方案核心是通过浏览器层面的事件拦截+剪贴板清除来阻止PrintScreen功能，以下是具体的代码拆解、优化和注意事项：

核心实现代码 #

// 拦截PrintScreen按键事件
document.addEventListener('keydown', function(e) {
    // 匹配PrintScreen按键的两种判断方式（兼容不同浏览器）
    if (e.keyCode === 44 || e.key === 'PrintScreen') {
        e.preventDefault();
        e.stopPropagation();
        // 可选：添加用户提示
        alert('PrintScreen功能已被禁用');
    }
});

// 清除剪贴板，避免截图被保存
document.addEventListener('copy', function(e) {
    e.preventDefault();
    // 兼容不同浏览器的剪贴板API
    if (window.clipboardData) {
        // 旧版IE/Edge兼容
        window.clipboardData.clearData();
    } else if (navigator.clipboard) {
        // 现代浏览器标准API（需HTTPS环境）
        navigator.clipboard.writeText('').catch(err => {
            console.error('清空剪贴板失败:', err);
        });
    }
});

关键说明 #

• 按键拦截逻辑：通过监听keydown事件，直接阻止PrintScreen按键的默认行为，同时阻止事件冒泡，避免其他脚本触发相关操作
• 剪贴板处理：即使用户通过某些方式触发了截图，copy事件拦截会清空剪贴板，确保截图无法被粘贴使用
• 兼容性限制：
  • 现代浏览器的navigator.clipboard API要求页面运行在HTTPS环境下，否则会报错
  • 无法阻止系统级截图工具（比如第三方截图软件），只能限制浏览器原生的PrintScreen操作
• 用户体验优化：可以把alert替换成更友好的页面内嵌提示，避免弹窗干扰用户

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