剪切板与复制粘贴
前言
最近在实现从excel复制内容，并粘贴（只粘贴文本）到luckysheet的功能，本来不是很难的事，但因为项目用的http，导致不得不尝试了很多种办法，现将这些方法做一个记录。
1、clipboard(推荐)
优点：
- 返回promise，是异步的，性能更好，不易卡顿。
- 能使用任意数据，如文本、图片等
缺点：
- 兼容性一般
- 页面是http协议不可使用（但开发模式下可以用）
示例：
let clipboardData = window.clipboardData; //for IE
if (!clipboardData) { // for chromeclipboardData = navigator.clipboard;
}//clipboardData.readText().then(res=>{if(res.includes('luckysheet_copy_action_table')){let trArr = res.match(/(?<=(]*?>)).*?(?=(<\/tr>))/g)let tdArr = trArr.map(str => {return str.match(/(?<=(]*?>)).*?(?=(<\/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 IEif (!clipboardData) { // for chromeclipboardData = e.originalEvent.clipboardData;}//res就是剪切板的内容let res = clipboardData.getData("text/html") || clipboardData.getData("text/plain");
})
文档：
onpaste 事件 | 菜鸟教程
3、document.execCommand
document.execCommand('copy')等已经弃用，不推荐使用，并且大量数据会卡顿，更推荐使用clipboard。
4、clipboard.js
这是一个用于复制粘贴的库，暂时没用过。
https://www.npmjs.com/package/clipboard
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！