使用clipboard.js其实很简单，网上查找使用方法也非常方便，大体分为以下几个步骤:
1.引入一个clipboard.js的文件；
2.新建一个clipboard对象；
3.点击按钮获取目标对象里面的内容，将其复制到剪切板。
注意：1.目标对象不能display：none，隐藏之后无法复制，如果需要隐藏，可以设置opacity:0;
摸索一番之后，还是如愿实现了项目所需的功能，简单的demo如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button data-param="test" id="copyBtn" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyTarget">点我复制到剪切板</button>
<div id="copyTarget" style="opacity: 0;"></div> <!--隐藏目标对象-->
<script src="jquery.js"></script>
<script src="clipboard.js"></script>
<script>
new Clipboard('.btn', {
text: function(trigger) {
var param = $(trigger).data("param"); /*获取目标对象上挂载的参数test*/
getCopyData(param);
return trigger.getAttribute('aria-label');
}
});
function getCopyData(param){
var infodata = "" ;
if(param == "test"){
$.ajax({
url:"package.json",
type:"get",
data:{},
dataType:"json",
async:false,
success:function(res){
infodata = res.description; /*获取需要复制的内容*/
$("#copyTarget").text(infodata); /*放入目标对象*/
},
error:function(){
alert("请求错误！") ;
}
})
}
}
</script>
</body>
</html>