由於項目需求，希望能夠用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等，就可以看到效果了。