vue复制图片到剪切板

最新推荐文章于 2024-06-27 10:51:27 发布

嘻嘻哈哈的疯子

最新推荐文章于 2024-06-27 10:51:27 发布

阅读量2.2k

点赞数 5

分类专栏： js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42353487/article/details/114986663

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue复制图片到剪切板

最开始使用clipboard2，本地和测试环境都能运行，到了生产环境就无法粘贴到微信。

后来搜索到可以将图片转换成blod直接复制到剪切板，代码如下

<img :src="codeUrl" width="200px" id="img_body">

<el-button v-if="copyLink" type="text" @click="copyImg">复制二维码</el-button>

async copyImg(e) {
  var _this = this
  const img = document.querySelector('#img_body')
  const setToClipboard =  blob => {
    const data = [new ClipboardItem({ [blob.type]: blob })]
    return navigator.clipboard.write(data)
  }
  try {
      const response = await fetch(img.src)
      const blob =  await response.blob()
     setToClipboard(blob)
      _this.$message({
          message: '复制成功',
          type: 'success'
      })
  } catch (error) {
      _this.$message({
          message: '复制失败',
          type: 'error'
      })
  }
}

注：需要https或者本地环境才可以获得剪切板权限