本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
做程序员的就是命苦，需求变更和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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 详解使用clipboard.js插件复制页面内容到剪切板