实现一键复制多张图片和文本到剪贴板

最新推荐文章于 2025-02-20 15:47:30 发布

前端老曹

最新推荐文章于 2025-02-20 15:47:30 发布

阅读量1.3k

点赞数 24

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51702278/article/details/138908112

版权

#遇到一个需求需要一键复制把当前数据内的图片(多个) 以及文本全部写入剪贴板#

前言：考虑到部分浏览器可能不支持 navigator.clipboard.write 方法，我们可以采用一个兼容性的解决方案，即利用 document.execCommand('copy') 方法。但是，直接复制图片到剪贴板在Web端是一个复杂的问题，特别是通过旧方法，因为它主要设计用于文本。对于图片，我们可以先将其转换为Data URL（Base64编码的图片），然后尝试复制这个字符串到剪贴板。尽管这样用户粘贴时得到的是图片的Base64编码文本而非直接的图片，但可以在某些场景下作为一种变通方案。

本文遇到不兼容的情况就直接弹框提醒复制失败了不做兼容处理了

先上代码

 <div class="copy-box">
    <div class="copy-box-text-box">
       <span class="copy-box-number">{
  { scope.row.verbalTemp }}</span>
       <el-tooltip placement="top" content="复制">
       <el-icon color="#409EFF" @click="copyImgText(scope.row)"><CopyDocument />
           </el-icon>
       </el-tooltip>
    </div>
    <div v-if=