js触发的click，ClipboardJS无法进行复制?

Question

需求是页面进入时就复制下载链接，而ClipboardJS必须触发click才能复制，js触发的不能复制，只有用户点击触发才能复制，有没有什么方法兼容全端的情况下实现这个需求

Answer 1

document.execCommand() 这个 API 只能在用户操作之后才能被触发。不要想用什么办法绕过了。
非要做的话，就做页面打开之后就做一个遮罩，可以让用户点击任意位置去执行 copy 方法。

Answer 2

假设是使用Vue, 可以尝试在mounted里面手动调用click事件:

mounted () {
    // 手动调用click()
}

Answer 3

在用户没有与页面有任何交互的时候，浏览器不允许你这样做的。

你可以在页面上设计一些东西，只要让用户触摸到页面就可以了。

Answer 4

以下代码我的APP中 在onMounted 中调用copy可以复制成功

const copy = async()=>{
  try{
    await toClipboard(content.value,copytag.value)
    console.log('copy success')
    copyed.value = true
  content.value = '复制成功！'
  } catch(e){
    console.log(e)
  }
}
const toClipboard=(text: string, container?: HTMLElement) =>{
      return new Promise((resolve, reject) => {
        // make fake element
        const fakeEl = document.createElement('button')
        // setup a new Clipboard.js
        const clipboard = new Clipboard(fakeEl, {
          text: () => text,
          action: () => 'copy',
          container: container !== undefined ? container : document.body
        })
        clipboard.on('success', (e) => {
          clipboard.destroy()
          resolve(e)
        })
        clipboard.on('error', (e) => {
          clipboard.destroy()
          reject(e)
        })
        // appendToBody fixes IE
        //if (appendToBody) document.body.appendChild(fakeEl)
        // simulate click
        fakeEl.click()
        // remove from body if appended
        //if (appendToBody) document.body.removeChild(fakeEl)
      })
    }