前端实现“点击按钮触发复制文本”功能

目录

• 【1】实现复制文本功能【部分浏览器不支持】
• • [现场环境浏览器 "复制失败" 报错](#现场环境浏览器 “复制失败” 报错)
• 【2】兼容

【1】实现复制文本功能【部分浏览器不支持】

以下代码实现文本赋值功能我本地浏览器成功了，但是现场环境浏览器 "复制失败"，

• 我本地浏览器版本：128.0.6613.115
• 现场环境浏览器版本：86.0.4240.111

async mikeOpen() {
  // window.open('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
  // location.href = 'chrome://flags/#unsafely-treat-insecure-origin-as-secure'

  try {
    await navigator.clipboard.writeText(
      'chrome://flags/#unsafely-treat-insecure-origin-as-secure'
    )
    this.$message('谷歌浏览器访问已复制地址添加平台网址信息开启麦克风权限111')
  } catch (err) {
    console.log('err----111', err)
    this.$message('复制失败111')
  }
},

现场环境浏览器 "复制失败" 报错

【2】兼容

【1】的问题可能是现场浏览器不支持 navigator.clipboard.writeText()，可以使用 document.execCommand('copy') ，但是好像有的浏览器不支持document.execCommand('copy')
所以添加了判断，如果浏览器支持 document.execCommand('copy') 则使用 document.execCommand('copy') 进行复制；

如果浏览器支持 navigator.clipboard.writeText 则使用 navigator.clipboard.writeText 修改复制方式

async mikeOpen() {
  // window.open('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
  // location.href = 'chrome://flags/#unsafely-treat-insecure-origin-as-secure'

  this.copyToClipboard('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
    .then(() => {
      this.$message('谷歌浏览器访问已复制地址添加平台网址信息开启麦克风权限222')
    })
    .catch((err) => {
      console.log('err----2222', err)
      this.$message('复制失败222')
    })
},

copyToClipboard(textToCopy) {
  if (document.execCommand('copy')) {
    // 创建textarea
    var textArea = document.createElement('textarea')
    textArea.value = textToCopy
    // 使textarea不在viewport，同时设置不可见
    textArea.style.position = 'fixed'
    textArea.style.opacity = 0
    textArea.style.left = '-999999px'
    textArea.style.top = '-999999px'
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()
    return new Promise((res, rej) => {
      // 执行复制命令并移除文本框
      document.execCommand('copy') ? res() : rej()
      textArea.remove()
    })
  } else if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
    // navigator clipboard 向剪贴板写文本
    return navigator.clipboard.writeText(textToCopy)
  }
},

来源