vue 复制内容及图片

//复制纯文本

 async copyText(str) {
      try {
        // 将链接复制到剪贴板 注意访问id环境下不可用
        await navigator.clipboard.writeText(str);
        this.$Message.success("复制成功");
      } catch (err) {
        // 如果复制失败,处理错误
        // console.error('无法复制链接到剪贴板', err);
      }
    }
//将弹窗内容复制为图片
   <div class="share_content" ref="share_content">
     弹窗内容
    </div>

  let share_content = this.$refs.share_content;
        if (share_content) {
          let canvas = await html2canvas(share_content);
          // 将 Canvas 转换为图片
          var img = canvas.toDataURL("image/png");
            try {
        // 创建一个Blob对象
        const blob = await fetch(img).then((response) => response.blob());
        // 创建一个包含Blob对象的ClipboardItem
        const item = new ClipboardItem({ [blob.type]: blob });
        // 将ClipboardItem写入剪贴板
        await navigator.clipboard.write([item]);
        this.$Message.success("复制成功");
      } catch (err) {
        // console.error('无法复制图片到剪贴板', err);
      }
        }

 

posted @ 2024-05-11 16:17  波仔、  阅读(80)  评论(0)    收藏  举报