ZeroClipboard2跨浏览器复制粘贴

梦里梦外; 2022-09-22 14:53 187阅读 0赞

**摘要：**我们平时常用到的复制粘贴功能，在浏览器端，要想使用一个按钮来实现，使用原生js代码来实现，是困难的，幸好ZeroClipboard的出现，解决了这一尴尬的问题。

# ZeroClipboard2简介 #

在前端页面设计时，按钮常常伴随着数据的提交或重置出现。然而某一次，需求是点击按钮，将后台展示在页面的特定内容复制到剪切板，这样用户就省去了选中文字并按Crtl+C的操作。这使我有机会接触并使用到了一款好的工具：ZeroClipboard2。  
ZeroClipboard2实现原理很简单：利用透明的 flash 覆盖在复制按钮上，点击 flash，将复制内容传入到 flash 中，再通过 flash 把传入的内容写到剪贴板上。  
ZeroClipboard2使用方法也简单粗暴：把 flash 和 js 放到同一路径下，然后引用 js 即可。

# ZeroClipboard2简单应用 #

先看一个例子，了解一下最简单的ZeroClipboard2使用：  
可能用到的工具  
\- ZeroClipboard2.2.0  
\- Eclipse 4.5  
\- Tomcat 7  
\- JQuery 1.7.2  
\- ExtJs

如下 clip.html

<!DOCTYPE HTML>
    <html >
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>ZeroClipboard 测试</title>
    </head>
    <body>
        文本：
        <input type="text" name="txt" id="content" value="要复制的内容" />
        <button id="copy" data-clipboard-target="content">copy</button>
        <br /><br />
        粘贴：
        <input type="text">
    </body>
    </html>
    <script type="text/javascript" src="js/ZeroClipboard.js"></script>
    <script type="text/javascript" > window.onload = function(){ var clip = new ZeroClipboard(document.getElementById("copy")); }; </script>

项目的骨架：  
![这里写图片描述][20160724170036507]  
使用时需要引入ZeroClipboard2所需要的文件ZeroClipboard.js和ZeroClipboard.swf文件，建议将其放入一个目录下。  
代码中用到的`data-clipboard-target`属性是为了指定要复制内容的id，ZeroClipboard 将依次尝试通过该元素的value、textContent、innerText属性来获取文本数据，将content的数据绑定到id为copy的button上。  
由于 Flash 本地沙箱的安全限制，以上代码如果是在本地HTML文件中被浏览器直接打开，将无法正常工作。我是用Tomcat运行的，而且如果是Eclipse默认方式打开的页面，也是不能工作的，需要在本地浏览器中打开。

在chrom中打开：  
![这里写图片描述][20160724164907054]

点击copy,在粘贴栏中Ctrl+v,即可看到效果：  
![这里写图片描述][20160724165132185]

# ZeroClipboard2与JQuery ： #

实际使用时，我们很少将js代码与html代码放在一起，而是引入js文件,可能还会用到JQuery。  
改进 clip.html

<!DOCTYPE HTML>
    <html >
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>ZeroClipboard 测试</title>
    </head>
    <body>
        文本：
        <input type="text" name="txt" id="content" value="要复制的内容" />
        <button id="copy" data-clipboard-target="content">copy</button>
        <br /><br />
        粘贴：
        <input type="text">
    </body>
    </html>
    <script type="text/javascript" src="js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>

引入的demo.js

$(document).ready(function(){ 
        var clip = new ZeroClipboard($("#copy"));
    });

项目的骨架：  
![这里写图片描述][20160724185620787]

# ZeroClipboard2与ExtJs： #

在生产环境中，我们使用的是ExtJs。在这个过程中，最难控制的就是何时初始化ZeroClipboard，因为ExtJs的按钮是在后期生成的，我不能很容易的添加诸如`data-clipboard-target`属性的方法告诉ZeroClipboard去复制什么内容，也没有一个很清楚的位置去写`new ZeroClipboard()`这样的逻辑，那么该如何处理呢？

*  ExtJs 应该在适当的位置初始化ZeroClipboard  
    在使用ExtJS创建button时，常常使用如下方法：

Ext.onReady(function(){    
    var buttonName = new Ext.Button({
                     id:"buttonName",
                     renderTo:Ext.getBody(),  
                     minWidth:100,   
                     handler:function(){    
                         Ext.MessageBox.show({   
                           title: '提示' ,  
                           msg: '你点击了我！' ,  
                           buttons: Ext.MessageBox.OK ,
                           fn: function(){ }
                         });  
                      }  
                   });   
    });

那么在初始化button时，就应该考虑初始化ZeroClipboard。你可以在浏览器的console中查看初始化是否完成。  
\- 在页面加载完成以后，在浏览器中应该存在ZeroClipboard对象。  
\- 使用自带方法查看：ZeroClipboard.state()

![这里写图片描述][20160724204312184]  
\- 如果一切顺利，可以看到ZeroClipboard.state().flash.ready的值为true.

*  使用ZeroClipboard自带的复制方法  
    有时候，我们无法给button设置`data-clipboard-target`属性，可以使用ZeroClipboard自带的复制方法绑定数据。

其中`setText()`是最简单且常用的方法

var clip = new ZeroClipboard($("#copy"));
    clip.setText($("#content").val());
    //可以设置3中格式，带有格式的内容粘贴到不同的程序，显示对应的效果
    clip.setText("复制的内容");
    clip.setHtml("<p>复制的内容</p>");
    clip.setRichText("{\\rtf1\n{\\b 复制的内容}}");

还有一种通用的设置方法`setData()`

clip.setData("text/plain", "复制的内容");
    clip.seData("text/html", "<p>复制的内容</p>");
    clip.setData("application/rtf", "{\\rtf1\n{\\b 复制的内容}}");

# ZeroClipboard2第一次复制不生效： #

在ZeroClipboard2与ExtJs结合使用时，我发现，每次复制的第一次不生效，需要点击第二下复制按钮，才能实现复制效果。在琢磨之后发现，我在绑定数据的时候使用的是`setText()`方法，而该方法设置的数据是一次性的，使用该方法设置复制数据后，只在下一次复制操作时生效。之后即使你点击复制按钮也不再执行复制，除非你再次调用`setText()`方法。  
解决这个问题，我们在button的回调函数中使用了的事件`copy`,改用`setData()`方法：

clip.on("copy", function(e){ 
        e.clipboardData.setData("text/plain", "复制的文本")
    });

[20160724170036507]: /images/20220721/cba99c6c77f340439c630e0b69d192d5.png
[20160724164907054]: /images/20220721/5c42fa4c9c5749b5aa8cb05581bef9b6.png
[20160724165132185]: /images/20220721/7843a3e7e1954e04a89af98cbe22e825.png
[20160724185620787]: /images/20220721/01a2589fe1f04521a5c129914ce8eae1.png
[20160724204312184]: /images/20220721/f6947ed5bdf64d76a5cf19aefb6e67b8.png