js触发复制、粘贴，设置和读取剪切板的数据

程序员的众多称号里的一个叫“CV战神”，但又有多少人知道cv的更多东西呢？

一起来看下cv下还隐含多少东西：

　　1.复制一段文字到剪切板

　　2.直接往剪切板写一段内容

　　3.从剪切板获取内容

复制文本到剪切板：

 1     // 复制内容到剪切板
 2     copyFn(value){
 3         let transfer = document.createElement('input');
 4         document.body.appendChild(transfer);
 5         transfer.value = value;  // 这里表示想要复制的内容
 6         transfer.focus();
 7         transfer.select();
 8         if (document.execCommand('copy')) {
 9             document.execCommand('copy');
10         }
11         transfer.blur();
12         // message.success('复制成功');
13         document.body.removeChild(transfer);
14     }

通过这个方法会把value复制到剪切板的'text/plain'区域，你要是注册了copy的监听，会触发你的监听。

直接将要复制的内容放到剪切板

 1     // 复制内容到剪切板
 2     clipboardWrite(value){
 3         window.navigator.clipboard.writeText(value)
 4         .then(() => {
 5             console.log('Text copied to clipboard');
 6         })
 7         .catch(err => {
 8             // This can happen if the user denies clipboard permissions:
 9             console.error('Could not copy text: ', err);
10         });
11     }

通过这个方法会把value复制到剪切板的'text/plain'区域，你要是注册了copy的监听，不会触发你的监听。

从剪切板获取内容

 1     // 获取剪切板的数据
 2     async pasteHandler(){
 3         const clipboardItems = await window.navigator.clipboard.read();
 4         let textHtml,textPlain;
 5         for (const clipboardItem of clipboardItems) {
 6             for (const type of clipboardItem.types) {
 7                 const item = await clipboardItem.getType(type);
 8                 if(item && item.type == 'text/html'){
 9                     textHtml = await item.text();
10                 }
11                 if(item && item.type == 'text/plain'){
12                     textPlain = await item.text();
13                 }
14             }
15         }
16         return {textHtml,textPlain}
17     }

方法中item会有四种类型，文本和html还有图片还有什么，忘却了，有需要的自己打印看看。

当然navigator.clipboard.readText()直接可以读取‘text/plain’的值，但如果你复制的是Excel的数据的话，通过这个方法获取到的只是一些文本和箭头。

研究了半天怎么用js触发ctrl+c和ctrl+v的事件，但也没有效果，哪位大佬成功了望不吝赐教。

over！

以上方法在谷歌是没问题的，但在火狐上就不行了，火狐的安全策略不允许你区读取粘贴板的内容，也就是说window.navigator.clipboard.read是不存在的，调用这个方法是会报错的，

总不能谷歌点击正常操作，火狐点击就报错吧，

费劲半天找到一个很low(但能想到的最好的方法就是这个了)的解决方式：

就是alert一段文字：请你使用ctrl+v进行粘贴。。。。

完美解决！

但如果用户不满意，就想点击粘贴，咋办？那就去开启权限去，开启权限后就能完美实现了。

开启权限方法：火狐浏览器地址栏输入：about:config，回车，然后点同意，然后搜索以下俩个权限，开启，然后回来刷新界面就能实现粘贴了：

'dom.events.asyncClipboard.dataTransfer'和'dom.events.testing.asyncClipboard'

当然写法和谷歌的默认写法也是不一样的：

    const clipboardItems = await window.navigator.clipboard.read();
    let items = clipboardItems.items;
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if(item && item.type === 'text/html'){
            item.getAsString(text_html=>{
                console.log("text_html >>: ", text_html);
            });
        }
        if(item && item.type === 'text/plain'){
            item.getAsString(text_plain=>{
                console.log("text_plain >>: ", text_plain);
            });
        }
    }

over