(转)实现JS复制、粘贴,Chrome/Firefox下可用

背景:html

      最近一直在作一个Web Excel项目,其中一项功能一直很纠结,就是数据的复制粘贴功能。功能要求:能够把Web端数据粘贴到Excel中,也能够从Excel中直接粘贴数据到页面编辑器中。支持Button粘贴和Ctrl+C/Ctrl+V快捷键复制粘贴。chrome


      本觉得这个功能会很简单,可是查了不少资料,用JS操做粘贴板IE下很好用,直接支持一个window.clipboardData对象,经过这个对象能够访问到粘贴板中内容。可是chrome和firefox支持不是很好。Chrome和firefox为何不支持有点难以理解,为了保护系统,免受外来侵害?浏览器

在网上搜了不少资料,可是大部分资料都是介绍在IE下使用window.clipboardData对象访问粘贴板实现Copy和paste,可是单独只为IE开发一个复制、粘贴功能,很是不实用;编辑器

固然网上还有其余方法,好比经过Flash的间接方式操做OS粘贴板,虽然有这类插件,可是也很很差用,只能用户点击复制按钮才行,并且也不灵活。ide

后来想了想,不少页面都是禁止copy的,那么经过浏览器事件,是否是能够访问到粘贴板?查了下资料,IE/Chrome/Firefox都支持oncopy/onpaste/oncut事件,虽然不是在spa

全部元素上都支持。可是这里经过事件的event应该能够访问到用户复制了什么内容,并修改Data。动手实验了下,经过console.debug查看chrome和firefox的event对象,会发现.net

event里面有一个clipboardData对象,因此后面的事情就不难了。看以下Firefox的截图就知道了: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参数就够了。debug

好了,上面能够“控制”粘贴板数据,接下来就是解析从Excel中“得到”的数据了。( ^_^ )

 

 

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