js web前端复制内容到剪切板 报错

前言

最近项目开发需要一个点击复制到浏览器的功能，查过网上的资料大多都是直接亮出代码，但是你复制粘贴过来发现好像不好使，这是为啥呢？没有发现说明复制到剪切板的前提条件，自己根据 一些开发经验总结并验证后记录下来给大家查阅吧。

正题

1.运行环境

:white_check_mark: vue3.0+
:white_check_mark: vite2.0+
:white_check_mark: edge/chorme version 100+
:white_check_mark: window 10

2. js复制到剪切板条件

1.url协议
2.当前运行时
通过js复制文本到电脑系统中的剪切板的前提条件是你当前页面url的协议，只有在http://localhost或https协议下以及当前运行时才能成功复制到系统中的剪切板。

3.实现代码

export const copyText = async (text: string) => {
  try {
    if (navigator && 'clipboard' in navigator) { // localhost 或 https 协议可用
      await navigator.clipboard.writeText(text)
    } else {
      const input = document.createElement('textarea')
      input.value = text
      document.body.appendChild(input)
      input.select()
      input.focus()

      // 实测在vue3的开发模式下，也是复制失败的，但是上线部署后https协议复制成功
      document.execCommand('copy') 
      document.body.removeChild(input)
    }
    return true
  } catch (error) {
    console.log(error);
    return false
  }
}

// 使用
copyText('test')

（未完待续，只要注意以上问题，就可以避免复制失败）