剪切板与复制粘贴

国王不在家

已于 2024-03-07 16:28:22 修改

阅读量444

点赞数 1

分类专栏：功能用例文章标签：前端 javascript 开发语言

于 2023-03-21 22:24:38 首次发布

本文链接：https://blog.csdn.net/badbaby52906/article/details/129695930

版权

功能用例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

最近在实现从excel复制内容，并粘贴（只粘贴文本）到luckysheet的功能，本来不是很难的事，但因为项目用的http，导致不得不尝试了很多种办法，现将这些方法做一个记录。

1、clipboard(推荐)

优点：

返回promise，是异步的，性能更好，不易卡顿。
能使用任意数据，如文本、图片等

缺点：

兼容性一般
页面是http协议不可使用（但开发模式下可以用）

示例：

【clipboardData和clipboard是不一样的，clipboardData是copy/paste事件对象下的一个属性。】

 let clipboardData = window.clipboardData; //for IE
if (!clipboardData) { // for chrome
    clipboardData = navigator.clipboard;
}

//
  clipboardData.readText().then(res=>{
                if(res.includes('luckysheet_copy_action_table')){
                    let trArr = res.match(/(?<=(<tr[^>]*?>)).*?(?=(<\/tr>))/g)
                    let tdArr = trArr.map(str => {
                        return str.match(/(?<=(<td[^>]*?>)).*?(?=(<\/td>))/g)
                    })
                    selection.pasteText(tdArr);
                }else{
                    selection.pasteHandler(res);
                }
                Store.luckysheet_selection_range = [];
                $("#luckysheet-copy-content").empty();
    
})

文档：

Clipboard - Web API 接口参考 | MDN

剪贴板操作 Clipboard API 教程 - 阮一峰的网络日志

2、copy、paste事件

监听元素的paste、copy事件即可操作剪切板。

优点：

无网络协议限制。

缺点：

CTRL + V或者右键菜单中的“粘贴”才能触发paste。（dispatchEvent-ClipbordEvent能触发paste但是没数据）

示例：

//粘贴事件处理
$(document).on("paste", function (e) {
    let clipboardData = window.clipboardData; //for IE
    if (!clipboardData) { // for chrome
        clipboardData = e.originalEvent.clipboardData;
    }
    //res就是剪切板的内容
    let res = clipboardData.getData("text/html") || clipboardData.getData("text/plain");
})

文档：

onpaste 事件 | 菜鸟教程

3、document.execCommand

document.execCommand('copy')等已经弃用，不推荐使用，并且大量数据会卡顿，更推荐使用clipboard。

http下清空剪切板

function copyEmptyStringToClipboard() {
    // 创建一个临时的textarea元素
    const tempTextArea = document.createElement('textarea');
    // 将其值设置为多个空格，不能设置为空字符串
    tempTextArea.value = '  ';
    // 将这个元素添加到文档中
    document.body.appendChild(tempTextArea);
    // 选中这个元素中的文本
    tempTextArea.select();
    // 执行复制操作
    document.execCommand('copy');
    // 移除这个临时元素
    document.body.removeChild(tempTextArea);
    
    console.log('剪切板现在是一个空字符串。');
  }