uniapp uni.setClipboardData h5在某些浏览器上报错setClipboardData fail的问题

解决H5剪贴板兼容问题

原创已于 2025-11-06 15:44:29 修改 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2025-11-06 15:32:23 首次发布

虽然官方给的平台差异上是支持h5的，但是实际上在浏览器的支持上不太相同

以下是做的兼容处理逻辑以及代码：

1.调用uni.setClipboardData，成功不管，若是执行了失败的回调，执行2

2.调用clipboard api，也就是navigator.clipboard.writeText，成功不管，若是未找到navigator.clipboard，执行3

3.调用document.execCommand('copy')，声明execCommand('copy')其实已经废弃了，若还是不行，做提示让用户自行复制吧

第二步方法：

function navigatorCopy(text){
        if(navigator.clipboard && navigator.clipboard.writeText){
          navigator.clipboard.writeText(text).then(() => {
            uni.showToast({
              title:'已复制',
              icon:'none',
            })
          }).catch(err=>{
            this.documentCopy(text)
          })
        }else{
          this.documentCopy(text)
        }
      }

第三步方法：

function documentCopy(text){
        const textarea = document.createElement('textarea')
        textarea.value = text
        textarea.style.position = 'fixed'
        textarea.style.opacity = '0'
        document.body.appendChild(textarea)
        textarea.select()

        try {
          const successful = document.execCommand('copy')
          document.body.removeChild(textarea)
          if (successful) {
            uni.showToast({
              title:'已复制',
              icon:'none',
            })
          } else {
            uni.showToast({
              title:'复制失败，请手动复制：' + text,
              icon:'none',
            })
          }
        } catch (err) {
          document.body.removeChild(textarea)
          uni.showToast({
            title:'复制失败，请手动复制：' + text,
            icon:'none',
          })
        }
      }

结束！