JS 实现复制文本到剪贴板

最新推荐文章于 2024-07-16 17:56:11 发布

UserGuan

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量240

点赞数 1

分类专栏： JavaScript类文章标签： javascript 前端

本文链接：https://blog.csdn.net/adminguan/article/details/139825846

版权

JavaScript类专栏收录该内容

29 篇文章 3 订阅

订阅专栏

方式一：使用 Clipboard API 方式

/** 将文本复制到剪贴板
 * @param e 要复制的内容
 */
copyTextToClipboard(e) {
  const navClipboard = navigator.clipboard
  if (!navClipboard) {
    console.log('浏览器不支持 Clipboard API 方式')
    return
  }
  navClipboard.writeText(e).then(() => {
    console.log('复制成功')
  }, () => {
    console.log('复制失败')
  })
},

方式二：使用 document.execCommand() 方式

/** 将文本复制到剪贴板
 * @param e 要复制的内容
 */
copyTextToClipboard(e) {
  const textArea = document.createElement('textarea')
  textArea.value = e
  // 添加到文档中
  textArea.style.position = 'fixed'
  textArea.style.left = '0'
  textArea.style.top = '0'
  document.body.appendChild(textArea)
  textArea.select() // 选择文本
  try {
    const result = document.execCommand('copy')
    if (result) {
      console.log('复制成功')
    } else {
      console.log('复制失败')
    }
  } catch (err) {
    console.log('复制错误:', err)
  }
  textArea.remove() // 移除元素
},

将方法一和方法二合并

/** 将文本复制到剪贴板
 * @param e 要复制的内容
 */
copyTextToClipboard(e) {
  const navClipboard = navigator.clipboard
  if (!navClipboard) {
    const textArea = document.createElement('textarea')
    textArea.value = e
    // 添加到文档中
    textArea.style.position = 'fixed'
    textArea.style.left = '0'
    textArea.style.top = '0'
    document.body.appendChild(textArea)
    textArea.select() // 选择文本
    try {
      const result = document.execCommand('copy')
      if (result) {
        console.log('复制成功')
      } else {
        console.log('复制失败')
      }
    } catch (err) {
      console.log('复制错误: ', err)
    }
    textArea.remove() // 移除元素
    return
  }
  navClipboard.writeText(e).then(() => {
    console.log('复制成功')
  }, () => {
    console.log('复制失败')
  })
},