您的位置:首页 - 文章 - JavaScript - 正文

clipboard.js复制html文本和复制图片

场景:
需要通过一键复制图片+文件,减少复制工作量,之前是复制图片与文件分开,这样就变成两次的操作步骤。
原理:
步骤:
1、引入clipboard插件和jquery

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js">
</script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

2、定义想要复制的html内容

<div id="wechat-copy-main">
<img class='' src='//www.baidu.com/img/bd_logo1.png' style='width:50px;'><br/> <br /> 【搜索关键词】桂圆枸杞红枣茶 <br /> 领10元独家券,券后【24.8元】包邮秒杀! 【推荐理由】【三盒540g大分量】独立包装, <br /> 方便携带!美容养颜,女生补气血必备茶!! <br /> 补气血,皮肤才会有光泽。喝起来很甜, <br /> 每天一杯,每天都有好气色!
</div>
<br />
<span class="wechat-copy"> <button style="color:#FFFFFF;background-color: #263740">复制</button>
</span>

3、实例化clipboard插件

<script type="text/javascript"> $(".wechat-copy").click(function (t) { var a = document.getElementById("wechat-copy-main"); console.log(a); copyFunction(a, ".wechat-copy", "微信文案复制成功"); }); var copyFunction = function (t, a, i) { var e = new ClipboardJS(a, { target: function () { return console.log(t, a), t } }); e.on("success", function (t) { alert('文案复制成功!'); t.clearSelection() }), e.on("error", function (t) { console.log('复制失败'); t.clearSelection() }) };
</script>

本文原创,作者:西决,其版权均为品创网络所有。如需转载,请注明出处:https://www.sxpcwlkj.com/018/

发表评论