Chrome浏览器读写系统剪切板

Posted 2020-10-17 方帅

IE浏览器支持直接读写剪切板内容：

1 window.clipboardData.clearData();  
2 window.clipboardData.setData(\'Text\', \'abcd\');

但是这种方式不安全，很容易泄露用户的隐私，所以现在浏览器如chrome都不支持这种方式了。

读取系统剪切板

查了很多资料，如果是粘贴系统剪切板内容，前提是先去读取系统剪切板内容。

获取事件对象：粘贴事件提供了一个clipboardData的属性，如果该属性有items属性，那么就可以查看items中是否有图片类型的数据了。但是不支持文件夹复制图片word等文件，可以赋值文本文字内容和截图内容。

         //覆盖浏览器粘贴事件
        document.addEventListener(\'paste\', function (e) {
            var clipboardData = e.clipboardData;
            if (!(clipboardData && clipboardData.items)) {//是否有粘贴内容
                return;
            }
            for (var i = 0, len = clipboardData.items.length; i < len; i++) {
                var item = clipboardData.items[i];
                if (item.kind === "string" && item.type == "text/plain") {
                    item.getAsString(function (str) {
                        // str 是获取到的字符串,创建文本框
                        //处理粘贴的文字内容
                    })
                } else if (item.kind === "file") {//file 一般是各种截图base64数据
                    var pasteFile = item.getAsFile();
                    // pasteFile就是获取到的文件
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        var base64Img = event.target.result;
                    }; // data url  
                    reader.readAsDataURL(pasteFile);
                }
                var copy_content = e.clipboardData.getData(\'text/plain\');
            }
        })

写入系统剪切板

查找到的资源都是在事件对象中直接setData，但是实际测试是没有效果的。

e.clipboardData.setData(\'text/plain\', defaultText);

以下提供两种实测有效的设置方式：

1）监听copy事件，触发copy命令

ctrl+C监听按键后如果直接设置event.clipboardData.setData 是无法生效的，必须通过触发copy命令后写入clipboardData。

但是要记得removeEventListener，否则影响自己应用其他地方的copy。

 1        document.addEventListener("paste", function (e) {
 2             console.log(e.clipboardData.getData("text"));
 3         });
 4         document.onkeydown = function (e) {
 5             if (e.ctrlKey && e.keyCode == 67) {//ctrl+C
 6                 function handler(event) {
 7                     event.clipboardData.setData(\'text/plain\', "自定义复制内容");
 8                     document.removeEventListener(\'copy\', handler, true);
 9                     event.preventDefault();
10                 }
11                 document.addEventListener(\'copy\', handler, true);
12                 document.execCommand(\'copy\');
13             }
14         }

2）通过将需要复制的内容赋值到文本中，将文本框内容选中，执行copy命令

  <textarea readonly id="copy_text" style="position:absolute;left:-9999px"></textarea>

 

 1         //复制  
 2         document.onkeydown = function (e) {
 3             if (e.ctrlKey && e.keyCode == 86) {//ctrl+V
 4                 var cloneActiveElement = "需要复制的内容";
 5                 var copyText = document.getElementById("copy_text");
 6                 copyText.innerhtml = cloneActiveElement;
 7                 copyText.readOnly = false;
 8                 copyText.select();
 9                 copyText.setSelectionRange(0, copyText.value.length);
10                 document.execCommand("copy");
11                 copyText.readOnly = true;
12             }

 

参考：

http://www.alloyteam.com/2015/04/how-to-paste-zhuangbility/  

https://ruby-china.org/topics/17266

http://www.cnblogs.com/beileixinqing/p/7484883.html