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

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

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

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

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

　　3.从剪切板获取内容

复制文本到剪切板：

    // 复制内容到剪切板
    copyFn(value){
        let transfer = document.createElement('input');
        document.body.appendChild(transfer);
        transfer.value = value;  // 这里表示想要复制的内容
        transfer.focus();
        transfer.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
        }
        transfer.blur();
        // message.success('复制成功');
        document.body.removeChild(transfer);
    }

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

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

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

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

从剪切板获取内容

    // 获取剪切板的数据
    async pasteHandler(){
        const clipboardItems = await window.navigator.clipboard.read();
        let textHtml,textPlain;
        for (const clipboardItem of clipboardItems) {
            for (const type of clipboardItem.types) {
                const item = await clipboardItem.getType(type);
                if(item && item.type == 'text/html'){
                    textHtml = await item.text();
                }
                if(item && item.type == 'text/plain'){
                    textPlain = await item.text();
                }
            }
        }
        return {textHtml,textPlain}
    }

方法中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