clipboard.js 中文文档

clipboard.js 复制图片

clipboard.js 也可以复制图片到微信和word,复制到微信不能是https和base64格式,但是wordexcel支持。

复制图片

<div id="html">
    <!--复制到微信图片地址不能是https、也不能是base64格式 !-->
    <img src='http://www.baidu.com/img/bd_logo1.png' style='width:60px;'><br />
    <img src='http://www.baidu.com/img/bd_logo1.png' style='width:60px;'><br />
    【网站】www.itxst.com
</div>
<!-- Trigger -->
<input id="btn1" type="button" onclick="copy('#btn1')" value="点击复制">
<script>
    /* 自定义复制函数
        * obj 触发器元素对象或id、class
        * text 需要复制的内容
        */
    function copy(obj) {
        var clipboard = new ClipboardJS(obj, {
            target: function (trigger) {
                return document.getElementById("html");
            }
        });
        clipboard.on('success', function (e) {
            e.clearSelection();
            document.getElementById("msg").innerHTML = "复制成功";
        });

        clipboard.on('error', function (e) {
            document.getElementById("msg").innerHTML = "复制失败";
        });
    }
</script>

在线试一试

复制Base64图片

<div id="html">
    <!-- word、excel支持 !-->
    <img src='base64格式数据' style='width:50px;'><br /> 
    【搜索】复制图片
</div>
<!-- Trigger -->
<input id="btn1" type="button" onclick="copy('#btn1')" value="点击复制">
<script>
    /* 自定义复制函数
        * obj 触发器元素对象或id、class
        * text 需要复制的内容
        */
    function copy(obj, text) {
        var clipboard = new ClipboardJS(obj, {
            target: function (trigger) {
                return document.getElementById("html");
            }
        });
        clipboard.on('success', function (e) {
            e.clearSelection();
            document.getElementById("msg").innerHTML = "复制成功";
        });

        clipboard.on('error', function (e) {
            document.getElementById("msg").innerHTML = "复制失败";
        });
    }
</script>

在线试一试

Catalog
快速入门 Usage html5 标签实现粘贴复制 api 方法高级使用方法 clipboard.js 复制图片 vue2 中使用 clipboard.js vue3 复制粘贴