详解使用clipboard.js插件复制页面内容到剪切板

HTML5 herman 3199浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

做程序员的就是命苦,需求变更和bug修复会伴随我们的一身。最近遇到几个比较难缠的客户,希望我们的产品能够提供复制网页内容到剪切板的功能。然后百度百度,反反复复的使用了window.clipboardData接口和Zero Clipboard插件来解决,但是客户的环境太复杂,window.clipboardData只支持ie。ZeroClipboard使用的是flash,苹果系列均不支持,同时firefox系列浏览器默认不开启flash。因此最后采用了clipboard.js插件来实现。

clipboard.js是一个开源的插件,目前可在github上http://zenorocha.github.io/clipboard.js/进行下载。
看看官方的介绍:

Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
That's why clipboard.js exists.
复制文本到剪贴板应该不难。它不需要许多步骤来配置或数百KBs加载。但最重要的是,它不应该依赖Flash或任何臃肿的框架。这就是为什么有clipboard.js的存在。

clipboard.js的使用非常简单,只需以下4步:
1.引入clipboard.min.js文件
2.选择一个可以确定被拷贝元素的选择器,本例中使用用的是基本的标签选择器<div>,当然也可以使用id选择器 class选择器等等
3.定义一个button按钮,注意按钮的属性:
  data-clipboard-action="copy" data-clipboard-target="div"
  其中data-clipboard-target属性就是第二步你定义的选择器
4.书写js,建立clipboard对象以及复制后执行的方法

详细实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-div</title>
    <script src="http://cdn.bootcss.com/clipboard.js/1.5.9/clipboard.min.js"></script>
</head>
<body>
    <div id="xttblog">业余草:www.xttblog.com</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
    <!-- data-clipboard-target对应的是标签的id,则使用data-clipboard-target="#xttblog" -->
    <script>
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e) {
            console.log(e);
            // 复制成功,取消选择
            e.clearSelection();
        });
        clipboard.on('error', function(e) {
            console.log(e);
        });
        // 如果需要动态销毁
        clipboard.destroy();
    </script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。原文地址:http://www.xttblog.com/?p=494

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 详解使用clipboard.js插件复制页面内容到剪切板