功能介绍
我们有时需要复制文本中的一段内容, 一般我们会通过左键选中然后复制的. 但是一旦出现需要反复去复制时, 在需要复制的内容比较多时可能出现没有复制全或者过程繁琐等问题. 例如我们会在网页上选择一个文件同时制定一个计算参数点击计算后将一个图表复制到 Excel 中, 这种工作有时会少复制一到两行数据. 因此设计了下面的功能.
实现方法
在网上找了好多种方法, 试了好多种不知道为什么都用不了. 在快绝望的时候试了一下 ZeroClipboard , 结果实现了这个功能.
注意: 使用该方法前必须将网页部署在 web server 上!!!!
在使用之前我们需要引入两个文件:
- jquery.js (使用jQuery必须引用的js文件)
- jquery.zclip.min.js (使用复制功能必须引用的文件)
另外在网页文件中我们还需要通过 ZeroClipboard.swf 文件产生一个隐藏的flash对象.
<head>
<script src="/demo/common/js/jquery.zclip.min.js"></script>
<script src="/demo/bootstrap/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#copybtn").click(function(){
copy();
});
});
function copy()
{
$('#copycontent').zclip({
path: '/demo/common/js/ZeroClipboard.swf',
copy: function(){//复制内容
return $("#copycontent").html();
},
afterCopy: function(){//复制成功
alert('复制成功');
}
});
}
</script>
</head>
<body>
<div id='copycontent'>
<table>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table>
</div>
<button id='copybtn'>点击复制表格内容</button>
</body>
ZeroClipboard所需要的包的下载路径: ZeroClipboard