当前位置：首页 > VUE

vue实现禁止截图功能

2026-01-20 22:54:22VUE

实现禁止截图功能的方法

在Vue中禁止截图通常需要结合前端技术手段，但需要注意的是完全禁止截图在技术上无法实现（用户仍可通过设备截图、拍照等方式获取）。以下是一些限制截图的常见方案：

监听键盘快捷键并阻止

通过监听keydown事件阻止常见的截图快捷键（如PrtSc、Win+Shift+S等）：

export default {
  mounted() {
    window.addEventListener('keydown', this.blockScreenshotShortcuts);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.blockScreenshotShortcuts);
  },
  methods: {
    blockScreenshotShortcuts(e) {
      const blockedKeys = new Set([
        'PrintScreen',
        'F12', // 开发者工具
        'Meta+Shift+S', // Windows截图
        'Meta+Shift+3' // Mac截图
      ]);

      const keyCombination = [
        e.metaKey && 'Meta',
        e.ctrlKey && 'Ctrl',
        e.shiftKey && 'Shift',
        e.altKey && 'Alt',
        e.key
      ].filter(Boolean).join('+');

      if (blockedKeys.has(e.key) || blockedKeys.has(keyCombination)) {
        e.preventDefault();
        alert('截图功能已被禁用');
      }
    }
  }
}

禁用右键和开发者工具

通过阻止默认行为和禁用开发者工具入口增加截图难度：

methods: {
  disableContextMenu() {
    document.addEventListener('contextmenu', e => {
      e.preventDefault();
      return false;
    });

    // 检测开发者工具打开
    setInterval(() => {
      const before = new Date();
      debugger;
      const after = new Date();
      if (after - before > 100) {
        document.body.innerHTML = '<h1>禁止使用开发者工具</h1>';
      }
    }, 1000);
  }
}

动态添加水印

通过全屏水印增加截图后的信息追溯能力：

<template>
  <div class="watermark-container">
    <div 
      v-for="i in 20" 
      :key="i" 
      class="watermark"
      :style="{ transform: `rotate(-45deg)`, left: `${(i % 5) * 25}%`, top: `${Math.floor(i / 5) * 25}%` }"
    >
      机密文档 - {{ userInfo.id }}
    </div>
    <!-- 正常页面内容 -->
  </div>
</template>

<style>
.watermark-container {
  position: relative;
  overflow: hidden;
}
.watermark {
  position: absolute;
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
  font-size: 24px;
  color: red;
}
</style>