做程序员的就是命苦，需求变更和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
： » 详解使用clipboard.js插件复制页面内容到剪切板
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/251143.html