您现在的位置是：首页 >技术交流 >前端实现点击按钮复制内容到剪切板（兼容安卓、ios、web、H5）网站首页技术交流

前言：我写了四种复制到剪切板的方式，可以根据自己的需求和喜好选择其中一种即可

1、我在使用这个原生clipboard的时候，部分安卓端、web端不支持这个api，复制不生效。

<template>
 <div @click="copyLink">点击复制到剪切板</div>
</template>
<script setup>
const link=ref("https://***");
const copyLink = async () => {
  try {
    await navigator.clipboard.writeText(link.value);
    console.log("复制成功");
  } catch (err) {
    console.error('复制失败：', err);
  }
}
</script>

2、使用老旧的浏览器支持方法，可以在一些不支持 Clipboard API 的浏览器或设备上工作，安卓端、和web端都支持（推荐）

<template>
 <div @click="copyLink">点击复制到剪切板</div>
</template>
<script setup>
const link=ref("https://***");
const copyWebLink = () => {
  const textarea = document.createElement('textarea');
  textarea.value = link.value;
  document.body.appendChild(textarea);
  textarea.select();  // 选择文本
  try {
    // 执行复制命令
    document.execCommand('copy');
    console.log("复制成功")
  } catch (err) {
    console.error('复制失败：', err);
  }
  // 移除临时文本框
  document.body.removeChild(textarea);
};
</script>

3、使用clipboard.js第三方库，兼容性更好，能够处理剪贴板操作的各类问题，包括浏览器和设备的差异（好用，但是感觉比较麻烦）

npm install clipboard
# 或者
yarn add clipboard

<template>
 <div @click="copyLink">点击复制到剪切板</div>
</template>
<script setup>
import ClipboardJS from 'clipboard';
const link=ref("https://***");
const copyWebLink = () => {
  // 创建一个临时按钮并触发复制
  const clipboard = new ClipboardJS('.copy-btn', {
    text: () => link.value,
  });

  clipboard.on('success', (e) => {
    console.log('复制成功');
    e.clearSelection();
  });

  clipboard.on('error', (e) => {
    console.error('复制失败', e);
  });

  // 手动触发按钮点击事件
  const tempButton = document.createElement('button'); //创建一个临时的 <button> 元素
  tempButton.classList.add('copy-btn');//为创建的 tempButton 元素添加 copy-btn 类，使其与 ClipboardJS 实例的选择器 .copy-btn 匹配。通过这个类，clipboard.js 知道该按钮会触发复制事件
  document.body.appendChild(tempButton);//将创建的 tempButton 按钮元素添加到 document.body 中,必须添加到 DOM 中，才能通过 clipboard.js 进行点击触发
  tempButton.click(); //模拟点击刚刚添加到 DOM 中的 tempButton 按钮
  document.body.removeChild(tempButton);//删除临时创建的 tempButton 按钮元素，确保 DOM 干净整洁
};
</script>

4、使用 Input 元素结合用户操作（以上方法都不起作用，可以最后试试这个）

<template>
<input type="text" value="Your text to copy" id="copyInput" readonly />
<button onclick="copyWebLink()">复制链接</button>
</template>
<script setup>
const copyWebLink = () => {
  const input = document.getElementById('copyInput');
  input.select();
  document.execCommand('copy');
 console.log("复制成功")
};
</script>

（document.execCommand：对于一些旧设备或安卓手机浏览器，使用 execCommand 方法创建临时文本框是个可行的方案）

(*╹▽╹*)