Vue中如何通过点击按钮读取剪贴板内容并粘贴

在Vue项目里实现点击按钮读取剪贴板内容，可以通过两种方式实现，分别适配现代浏览器和旧版本浏览器：

方法一：使用现代浏览器支持的Clipboard API #

这是目前推荐的标准方法，通过navigator.clipboard.readText()读取剪贴板文本内容，该API只能在**用户交互（比如点击按钮）**的上下文里调用，正好匹配你的场景：

Vue 3 组合式API示例 #

<template>
  <button @click="handlePaste">粘贴</button>
</template>

<script setup>
async function handlePaste() {
  try {
    // 读取剪贴板文本内容
    const content = await navigator.clipboard.readText();
    console.log('剪贴板内容:', content);
    // 这里可将内容赋值给响应式变量或做后续业务处理
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
}
</script>

Vue 2 选项式API示例 #

<template>
  <button @click="handlePaste">粘贴</button>
</template>

<script>
export default {
  methods: {
    async handlePaste() {
      try {
        const content = await navigator.clipboard.readText();
        console.log('剪贴板内容:', content);
      } catch (err) {
        console.error('读取剪贴板失败:', err);
      }
    }
  }
}
</script>

方法二：兼容旧浏览器的方案（已废弃但仍可用） #

如果需要兼容不支持Clipboard API的旧浏览器，可以通过创建临时隐藏输入框，利用document.execCommand('paste')实现：

Vue 3 组合式API示例 #

<template>
  <button @click="handlePaste">粘贴</button>
</template>

<script setup>
function handlePaste() {
  try {
    // 创建临时textarea
    const tempInput = document.createElement('textarea');
    tempInput.style.position = 'absolute';
    tempInput.style.opacity = '0';
    tempInput.style.left = '-9999px';
    document.body.appendChild(tempInput);

    // 聚焦并执行粘贴
    tempInput.focus();
    document.execCommand('paste');
    
    // 获取剪贴板内容
    const content = tempInput.value;
    console.log('剪贴板内容:', content);

    // 移除临时输入框
    document.body.removeChild(tempInput);
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
}
</script>

注意事项 #

• Clipboard API需要页面处于HTTPS环境（localhost除外）才能正常工作；
• document.execCommand已被标准废弃，但目前多数浏览器仍保留支持，仅作为兼容方案使用；
• 两种方法都需要用户主动触发（比如点击按钮），浏览器会阻止无用户交互的剪贴板读取操作，避免隐私泄露。

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