由于项目需求,希望能够用javascript复制富文本格式的数据,例如全选一个网页Ctrl+C, Ctrl+V到一个word文档中,数据还是原来的格式,显示出来的样子也都和原来一样。现在希望使用javascript实现同样的功能。
由于系统的限制,javascript往系统剪切板上放置的数据只有两种格式Text和URL。具体使用如下:
function CopyToClipBoard(){
var clipBoardContent="abcdefg";
window.clipboardData.setData("Text",clipBoardContent);
alert("已复制本页链接,您可以使用Ctrl+V粘贴后,发送给好友!");
上述方式只能存放普通的文本,无法保留原来的颜色字体大小等格式。
想要复制指定对象,首先需要定位到目标对象,所幸javascript中可以根据元素的id字段进行定位,可以轻易获取组成它的html文本,但是如果把这些html数据直接放入剪切板中,用Ctrl+V进行粘贴,我们得到的也只是没有解析的html,不能展现有效数据。
在搜索了大量资料之后终于发现了一个好的方法,通过创建ControlRange,然后执行execCommand('Copy')命令将制定元素块放到剪切板中, 此方法仅支持IE浏览器
<script>
function CopyImageToBoard(area){
if (typeof area.contentEditable == 'undefined' ||
!document.body.createControlRange){
alert('Your IE does not support copy action, please use ctrl + c instead! ”');
}else{
var ctr = document.body.createControlRange();
area.contentEditable = true;
ctr.addElement(area);
ctr.execCommand('Copy');
area.contentEditable = false;
alert('Copy success! ');
}
</script>
<div id ="all">
<a href="javascript:void(0)" onClick="CopyImageToBoard(document.getElementById('all'))" >copy to clipboard</a>
<table id="text">
<tr style="background:red">
<td>1</td>
<td>2</td>
<td>3</td>
<tr style="background:green">
<td>1</td>
<td>2</td>
<td>3</td>
<tr style="background:black">
<td>1</td>
<td>2</td>
<td>3</td>
</html>
点击链接按钮之后会复制整个区域到系统剪切板,把数据粘贴到支持富文本格式的编辑器中如word等,就可以看到效果了。