前端实现一键复制及阻止用户复制功能

一、前端实现复制

1. document.execCommand(‘copy’)

已弃用:  不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码。请注意，该特性随时可能无法正常工作。

这里是借用 input 或 textarea 来实现。

实现一个复制的方法

// src/hooks/useCopy.tsimport {ElMessage} from 'element-plus';/** * 实现文字复制 * @param copyValue 将要复制的文字 */export const useCopy = (copyValue: string) => {      // 创建输入框      let inputDom = document.createElement('input');      // 给输入框value赋值      inputDom.value = copyValue;      // 把input框添加到body上      document.body.appendChild(inputDom);      // 选中输入框中的内容      inputDom.select();            // 复制文字到剪切板      const hasCopy = document.execCommand('Copy');      ElMessage({          type: hasCopy ? 'success' : 'error',          message: hasCopy ? '复制成功' : '复制失败'     });                  // 删除创建的dom节点      document.body.removeChild(inputDom);}

引用复制方法

      {{ value }}    复制  import { useCopy } from "@/hooks/useCopy";let value = "11212fdgafaweaqwreqrqr";let handleCopy = () => {  useCopy(value);};

2. navigator.clipboard 实现复制文字

只有在用户事先授予网站或应用对剪切板的访问许可之后，才能使用异步剪切板读写方法。Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。

复制方法的实现

// src/hooks/useCopy.tsimport {ElMessage} from 'element-plus';/** * 实现文字复制 * @param copyValue 将要复制的文字 */export const useCopy = (copyValue: string) => {  try {    // 如果浏览器支持则会放回 Clipboard 对象，否则返回 undefined    const clipboard = navigator.clipboard;    if (clipboard) {      clipboard.writeText(copyValue).then(() => {        ElMessage({          type: 'success',          message: '复制成功'        });      });    } else {      ElMessage({        type: 'error',        message: '该浏览器不支持复制，请尝试换其它浏览器！'      });    }  } catch (error) {    console.log('error:', error);  }};

引用复制方法

      {{ value }}    复制  import { useCopy } from "@/hooks/useCopy";let value = "11212fdgafaweaqwreqrqr";let handleCopy = () => {  useCopy(value);};

3. navigator.clipboard 实现复制图片

          复制      import imgSrc from "@/assets/images/login_bg2.png";export default {  setup() {    const src = imgSrc;    const handleCopy = () => {      let imgBlob;      fetch(src).then(async (res) => {        try {          // 图片转换成流          imgBlob = await res.blob();          // const text = new Blob(["cccccccccc"], { type: "text/plain" });          // 实现图片复制          const item = new ClipboardItem({ [imgBlob.type]: imgBlob });          await navigator.clipboard.write([item]);          console.log("文本复制成功");          // 实现图片读取(粘贴)          const clipboardContents = await navigator.clipboard.read();          clipboardContents.forEach(async (item: any) => {            const blob = await item.getType("image/png");            const imgDom = document.createElement("img");            imgDom.style.width = "100%";            imgDom.style.height = "100%";            imgDom.src = URL.createObjectURL(blob);            const pDom = document.getElementById("image-container");            pDom?.appendChild(imgDom);          });        } catch (error) {          console.log("error:", error);        }      });    };    return {      src,      handleCopy,    };  },};

二、前端实现阻止用户复制文本

监听用户右键复制操作（可以整个系统复制监听，也可以对某段文字进行监听），当用户进行复制时，判断用户当前有无权限，只有有权限才可以复制，否则不可以并进行一系列操作。

实现

            身份：      {{ isVip ? "会员" : "普通用户" }}        {{ value }}          切换身份      import { useCopy } from "@/hooks/useCopy";import { ElMessage } from "element-plus";import { onMounted, ref } from "vue";let value = "11212fdgafaweaqwreqrqr";let isVip = ref(true);onMounted(() => {  const textDom = document.getElementById("vip-text")!;  textDom.addEventListener("copy", (e) => {    e.preventDefault();    if (isVip.value) {      // 获取手表选中内容, 加 "" 是为了把获取的对象转字符串      const selectContent = window.getSelection() + "";      // 此处使用 navigator.clipboard 来实现文字的复制      useCopy(selectContent);      window.getSelection()?.empty();    } else {      ElMessage({        type: "error",        message: "请先升级为VIP会员",      });    }  });});