Vue中复制内容到剪贴板

目录

https

http

https/http

https

在https的环境下，我们可以使用浏览器的navigator.clipboard.writeText 的API来实现

async function copyTextToClipboard(text) {
  try {
    // 检查浏览器是否支持 Clipboard API
    if (navigator.clipboard) {
      // 将文本写入剪贴板
      await navigator.clipboard.writeText(text);
      console.log('Text copied to clipboard successfully');
    } else {
      console.error('Clipboard API not available');
    }
  } catch (err) {
    // 处理可能发生的错误
    console.error('Failed to copy text: ', err);
  }
}

http

而在http的环境下我们则可以用document.execCommand来实现复制的方法，但是这个方法已经逐渐被现代浏览器废弃，现代Web开发推荐使用 Clipboard API，它提供了更安全、更高效、更标准的剪贴板操作方式，并且支持异步操作。

function copyTextToClipboard(text) {
  // 创建一个临时的 textarea 元素用于保存文本
  const textarea = document.createElement('textarea');
  // 设置 textarea 的值为要复制的文本
  textarea.value = text;
  
  // 将 textarea 移动到屏幕之外，使其不可见
  textarea.style.position = 'absolute';
  textarea.style.left = '-9999px';
  
  // 将 textarea 添加到文档中
  document.body.appendChild(textarea);
  
  // 选择 textarea 中的文本
  textarea.select();
  
  try {
    // 执行复制命令
    const successful = document.execCommand('copy');
    // 检查复制是否成功
    if (successful) {
      console.log('文本已成功复制到剪贴板');
    } else {
      console.error('复制文本失败');
    }
  } catch (err) {
    // 处理复制过程中可能出现的错误
    console.error('无法复制文本：', err);
  }
  
  // 从文档中移除 textarea
  document.body.removeChild(textarea);
}

https/http

若是想在http或https的环境下都能正常运转，这里推荐使用第三方库vue-clipboard3来实现

安装

yarn add vue-clipboard3
npm install --save vue-clipboard3

在页面中引用

import useClipboard from 'vue-clipboard3'

const { toClipboard } = useClipboard()

const copy = async () => {
      try {
        await toClipboard('Any text you like')
        console.log('Copied to clipboard')
      } catch (e) {
        console.error(e)
      }
    }