（轉）實現JS複製、粘貼，Chrome/Firefox下可用

背景：

      最近一直在作一個Web Excel項目，其中一項功能一直很糾結，就是數據的複製粘貼功能。功能要求：能夠把Web端數據粘貼到Excel中，也能夠從Excel中直接粘貼數據到頁面編輯器中。支持Button粘貼和Ctrl+C/Ctrl+V快捷鍵複製粘貼。

      本覺得這個功能會很簡單，可是查了不少資料，用JS操做粘貼板IE下很好用，直接支持一個window.clipboardData對象，經過這個對象能夠訪問到粘貼板中內容。可是chrome和firefox支持不是很好。Chrome和firefox爲何不支持有點難以理解，爲了保護系統，免受外來侵害？

在網上搜了不少資料，可是大部分資料都是介紹在IE下使用window.clipboardData對象訪問粘貼板實現Copy和paste，可是單獨只爲IE開發一個複製、粘貼功能，很是不實用；

固然網上還有其餘方法，好比經過Flash的間接方式操做OS粘貼板，雖然有這類插件，可是也很很差用，只能用戶點擊複製按鈕才行，並且也不靈活。

後來想了想，不少頁面都是禁止copy的，那麼經過瀏覽器事件，是否是能夠訪問到粘貼板？查了下資料，IE/Chrome/Firefox都支持oncopy/onpaste/oncut事件，雖然不是在

全部元素上都支持。可是這裏經過事件的event應該能夠訪問到用戶複製了什麼內容，並修改Data。動手實驗了下，經過console.debug查看chrome和firefox的event對象，會發現

event裏面有一個clipboardData對象，因此後面的事情就不難了。看以下Firefox的截圖就知道了：

雖然Chrome和Firefox下能夠經過event獲取clipboardData對象，可是要注意在IE下面，copy和paste事件的event對象是沒有這個對象的，因此還須要經過window來獲取clipboardData，最終代碼以下：

 

    //綁定在了body上，也能夠綁定在其餘可用元素行，可是不是全部元素都支持copy和past事件。  
    $(document.body).bind({  
        copy: function(e) {//copy事件  
            var cpTxt = "複製的數據";  
            var clipboardData = window.clipboardData; //for IE  
            if (!clipboardData) { // for chrome  
                clipboardData = e.originalEvent.clipboardData;  
            }  
            //e.clipboardData.getData('text');//能夠獲取用戶選中複製的數據  
            clipboardData.setData('Text', cpTxt);  
            alert(cpTxt);  
            $('#message').text('Copy Data : ' + cpTxt);  
            return false;//不然設不生效  
        },paste: function(e) {//paste事件  
            var eve = e.originalEvent  
            var cp = eve.clipboardData;  
            var data = null;  
            var clipboardData = window.clipboardData; // IE  
            if (!clipboardData) { //chrome  
                clipboardData = e.originalEvent.clipboardData  
            }  
            data = clipboardData.getData('Text');  
            $('#message').html(data);  
        }  
    });  

View Code

 

經過clipboardData的getData和setData方法就能夠和粘貼板交互了。並且要注意的是getData和setData只接受Text和Url兩個控制參數，通常用Text參數就夠了。

好了，上面能夠「控制」粘貼板數據，接下來就是解析從Excel中「得到」的數據了。( ^_^ )

 

 

來源：http://blog.csdn.net/hackersaillen/article/details/45694181