js点击按钮复制图片的两种方式 Document.execCommand() 、 Clipboard API

最新推荐文章于 2023-05-29 20:46:53 发布

HHH 917

最新推荐文章于 2023-05-29 20:46:53 发布

阅读量2.8k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43245095/article/details/120475226

版权

js 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

详细介绍

参考阮一峰的网络日志剪贴板操作 Clipboard API 教程 https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html

代码

1.对于图片是http地址且长度不是很长

		const selection = window.getSelection();
        if (selection.rangeCount > 0) selection.removeAllRanges();
        const range = document.createRange();
        range.selectNode(this.$refs.foo); //传入dom
        selection.addRange(range);
        let copy = document.execCommand("copy"); //copy是复制
        console.log("copy", copy); //打印获取的dom

        this.$message({
          type: "success",
          message: "图片复制成功！",
          duration: 1000,
        });
        selection.removeAllRanges(); //清除缓存

2.对于图片是base64的长字符图片

        // 接口字段base64_img以 data:image/png;base64, 须剪掉
        const pic = this.pic.slice(22);
        const blobInput = this.convertBase64ToBlob(pic, "image/png");
        const clipboardItemInput = new ClipboardItem({
          "image/png": blobInput,
        });
        navigator.clipboard.write([clipboardItemInput]);