用javascript复制富文本 - qianye0905

由于项目需求，希望能够用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>

<html>
<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>
 <tr style="background:green">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
 <tr style="background:black">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</html>

点击链接按钮之后会复制整个区域到系统剪切板，把数据粘贴到支持富文本格式的编辑器中如word等，就可以看到效果了。

posted on 2013-08-29 01:47 qianye0905 阅读(2945) 评论(7) 收藏举报

刷新页面返回顶部