前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载Jspreadsheet 的剪贴板能力让数据网格可以在多个实例之间、以及与 Excel、Google Sheets 等外部表格软件之间无缝复制与粘贴数据。本文基于 clipboard.md 官方文档结合 CE 仓库源码copyPaste.js、events.js、test/paste.js深入剖析copy/paste方法与oncopy/onbeforepaste/onpaste事件读完后你将掌握剪贴板操作的程序化控制、粘贴拦截与数据校验以及底层实现原理。概述数据网格的剪贴板能力Jspreadsheet 的剪贴板提供了一套完整的功能用于在 Jspreadsheet 实例之间以及与其他电子表格软件如 Excel 或 Google Sheets之间复制和粘贴数据。这些功能包括自动公式更新粘贴包含公式的数据时Jspreadsheet 会自动更新公式使其匹配新的数据上下文数据覆盖粘贴操作支持数据覆盖让你对粘贴数据的处理拥有细粒度控制自定义事件你可以挂接特定的剪贴板相关事件自定义复制-粘贴行为包括校验、转换和数据过滤。本文档详述了用于控制剪贴板行为、定制粘贴动作、以及确保不同数据网格之间顺畅互操作的方法与事件。关键特性特性说明自动公式更新粘贴含公式数据时自动调整公式以匹配新位置上下文数据覆盖粘贴动作支持数据覆盖可精细控制被粘贴数据的处理方式自定义事件通过剪贴板相关事件钩子定制复制/粘贴行为校验、转换、数据过滤Pro 版本能力JspreadsheetPro 版本包含额外的剪贴板能力强化了格式、样式与公式引用更新方面的体验复制与粘贴格式Pro 版本不仅传输数据还会在复制-粘贴动作中一并传递单元格格式如字体样式、边框和颜色与样式公式引用更新Pro 版本确保粘贴的公式会根据新位置自动调整引用保持电子表格公式的完整性。以上为官方文档对 Pro 版本的说明本文所述方法与事件均为 CE社区版源码中可直接验证的能力。剪贴板管理方法Jspreadsheet 提供控制剪贴板操作的方法实现数据网格之间或与 Excel 等外部工具之间的顺畅数据迁移。方法描述copy复制或剪切工作表中选中单元格的内容。paramcut- 若为 true操作为剪切否则为复制。worksheetInstance.copy(cut?: boolean): void;示例worksheetInstance.copy(true)用于剪切数据。paste在指定坐标粘贴数据将内容粘贴到一个或多个单元格中。paramx- 粘贴起始单元格的列索引。paramy- 粘贴起始单元格的行索引。paramdata- 要粘贴的内容。worksheetInstance.paste(x: number, y: number, data: string): false \| undefined;从源码看这两个方法被注册为工作表的公开方法见 worksheets.jscopy(cut)内部在cut为真时调用cutControls()否则调用copy.call(this, true)仅复制高亮单元格paste则直接暴露底层的 paste 实现。// 复制当前选中区域 worksheetInstance.copy(false); // 剪切当前选中区域 worksheetInstance.copy(true); // 在 (0, 0) 坐标粘贴 Tab 分隔的二维数据 worksheetInstance.paste(0, 0, 1\t2\t3\n4\t5\t6);剪贴板操作事件这些事件允许你挂接到复制与粘贴等剪贴板操作中对数据传输或处理方式获得更强的控制。事件描述oncopy数据复制到剪贴板时触发。可用于在数据进入剪贴板之前检查或修改被复制的数据。oncopy(instance: WorksheetInstance, selectedRange: [number, number, number, number], copiedData: string, cut: boolean \| undefined): string \| false \| undefined;onbeforepaste在粘贴发生之前触发允许你校验或转换传入的数据必要时还可以取消粘贴。onbeforepaste(instance: WorksheetInstance, copiedText: { value: CellValue }[][], colIndex: number \| string, rowIndex: number \| string): undefined \| boolean \| string;onpaste粘贴动作完成之后触发。适用于粘贴后的后处理或触发额外动作。onpaste(instance: WorksheetInstance, pastedInfo: { x: number, y: number, value: CellValue }[][]): void;注意在 Jspreadsheet CE 中无法在oncopy事件期间取消或修改剪贴板值。事件参数细节oncopy的selectedRange是归一化后的选中范围四元组[起始列, 起始行, 结束列, 结束行]源码中通过Math.min/Math.max对selectedCell进行归一化见 copyPaste.jscopiedData是 Tab 分隔的字符串数据cut标识是否为剪切操作。onbeforepaste的copiedText是二维数组每个元素为{ value: CellValue }包装对象源码在 copyPaste.js 中把解析后的数据逐项包装成该结构返回false取消粘贴返回字符串则替换粘贴内容。onpaste的pastedInfo是{ x, y, value }记录数组标识每个被粘贴单元格的坐标与新值源码在 copyPaste.js 中构建并派发。源码级原理复制与粘贴是如何实现的copy 的底层实现copy的实现位于 copyPaste.js关键点包括默认分隔符为 Tab\t以与 Excel 保持兼容只有highlighted为 true 时才只复制带有highlight类的单元格CSV 转义当单元格值包含分隔符、逗号、换行或双引号时值会被包裹在双引号中内部双引号转义为copyPaste.js写入剪贴板复制时创建一个隐藏的textarea将数据写入并调用document.execCommand(copy)copyPaste.js触发oncopy派发oncopy(instance, selectedRange, strLabel, isCut)其返回值会被消费——返回字符串则作为最终复制内容返回false则中止copyPaste.js复制边框标记复制后给高亮单元格追加copying、copying-left/right/top/bottom类形成经典的 Excel 式复制虚线边框copyPaste.js哈希缓存复制的数据会被哈希存入obj.hashString供后续粘贴时判断是否应连带应用样式copyPaste.js。浏览器快捷键CtrlC/CtrlX会调用copy.call(instance, true)与cutControls()见 events.js剪切动作在复制后会把高亮单元格的值清空events.js。paste 的底层实现paste(x, y, data)的实现位于 copyPaste.js处理流程如下数据解析通过parseCSV(data, \t)将 Tab 分隔文本解析为二维数组parseCSV完整实现了引号字段、转义引号、CRLF/LF/CR 换行处理helpers.js样式连带若粘贴数据的哈希与复制时的hashString一致则从复制源恢复样式copyPaste.js范围倍数扩展若目标选中范围是源数据范围的整数倍粘贴数据会自动重复铺满目标范围copyPaste.js粘贴前拦截派发onbeforepaste(instance, copiedText, x, y)返回false取消粘贴返回字符串则替换粘贴内容copyPaste.js自动扩容当粘贴超出当前行列范围时若allowInsertColumn/allowInsertRow不为 false会自动插入列/行并把跨越隐藏行列的情况考虑在内copyPaste.js单元格写入与公式链逐单元格调用updateCell写入并加入历史记录随后updateFormulaChain更新公式链、setHistory记录撤销/重做、updateTable刷新表格copyPaste.js粘贴后事件构建{ x, y, value }记录数组并派发onpaste随后派发onafterchangescopyPaste.js。浏览器原生paste事件由pasteControls处理从e.clipboardData.getData(text)读取文本以当前选中单元格为起点调用pasteevents.js且仅在options.editable ! false且未处于编辑状态时生效。事件派发统一走 dispatch.js支持全局onevent、具体事件配置与插件钩子。实战拦截粘贴数据onbeforepaste你可以按需拦截并取消粘贴事件。以下示例在粘贴发生前弹出提示并返回false取消粘贴四个主流框架版本均可在 clipboard.md 对应章节找到完整出处。原生 HTMLhtml script srchttps://bossanova.uk/jspreadsheet/v5/jspreadsheet.js/script script srchttps://jsuites.net/v5/jsuites.js/script link relstylesheet hrefhttps://bossanova.uk/jspreadsheet/v5/jspreadsheet.css typetext/css / link relstylesheet hrefhttps://jsuites.net/v5/jsuites.css typetext/css / link relstylesheet hrefhttps://fonts.googleapis.com/css?familyMaterialIcons / div idspreadsheet/div script jspreadsheet(document.getElementById(spreadsheet), { worksheets: [{ minDimensions: [6,6], }], onbeforepaste: function() { alert(Not allowed to paste); return false; } }); /script /htmlReactimport React, { useRef } from react; import { Spreadsheet, Worksheet } from jspreadsheet-ce/react; import jsuites/dist/jsuites.css; import jspreadsheet-ce/dist/jspreadsheet.css; export default function App() { // Spreadsheet array of worksheets const spreadsheet useRef(); // Data const data [ [Mazda, 2001, 2000], [Peugeot, 2010, 5000], [Honda Fit, 2009, 3000], [Honda CRV, 2010, 6000], ]; const onbeforepaste function() { alert(Not allowed to paste); return false; } // Render data grid component return ( Spreadsheet ref{spreadsheet} onbeforepaste{onbeforepaste} Worksheet data{data} / /Spreadsheet ); }Vuetemplate Spreadsheet refspreadsheetRef :onbeforepasteonbeforepaste Worksheet :datadata / /Spreadsheet /template script setup import { ref } from vue; import { Spreadsheet, Worksheet } from jspreadsheet-ce/vue; import jsuites/dist/jsuites.css; import jspreadsheet-ce/dist/spreadsheet.css; // Spreadsheet ref const spreadsheetRef ref(null); // Data const data [ [Mazda, 2001, 2000], [Peugeot, 2010, 5000], [Honda Fit, 2009, 3000], [Honda CRV, 2010, 6000], ]; // Paste interception method const onbeforepaste () { alert(Not allowed to paste); return false; }; /scriptAngularimport { Component, ViewChild, ElementRef } from angular/core; import jspreadsheet from jspreadsheet-ce; import jspreadsheet-ce/dist/jspreadsheet.css import jsuites/dist/jsuites.css // Create the data grid component Component({ standalone: true, selector: app-root, template: div #spreadsheet/div, }) export class AppComponent { ViewChild(spreadsheet) spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ minDimensions: [6,6], }], onbeforepaste: function() { alert(Not allowed to paste); return false; } }); } }进阶实战程序化复制、剪切与粘贴除键盘与右键菜单外你可以完全通过 API 驱动剪贴板操作。copy(true)的剪切语义会在复制后清空源区域paste(x, y, data)则适合做数据导入、表格迁移或撤销重做类功能。// 初始化数据网格 const spreadsheet jspreadsheet(document.getElementById(spreadsheet), { worksheets: [{ data: [ [Mazda, 2001, 2000], [Peugeot, 2010, 5000], ], minDimensions: [6, 6], }], }); const ws spreadsheet[0]; // 1. 全选并复制 ws.selectAll(); ws.copy(false); // 2. 粘贴到 (3, 3)数据为 Tab 分隔文本 ws.paste(3, 3, Honda Fit\t2009\t3000); // 3. 剪切复制并清空原区域 ws.copy(true); // 4. 在 onpaste 中做后处理 const spreadsheet2 jspreadsheet(document.getElementById(spreadsheet2), { worksheets: [{ minDimensions: [6, 6] }], onpaste: function(instance, pastedInfo) { console.log(Pasted cells:, pastedInfo); }, });粘贴数据中的换行符使用\r\n或\n均可parseCSV会统一解析单元格值内的 Tab 与引号需要按 CSV 规则转义。若粘贴范围超出网格边界只要allowInsertColumn/allowInsertRow未被设置为 false网格会自动扩容。测试与验证仓库的 test/paste.js 为剪贴板粘贴行为提供了可验证的测试用例可作为你理解与调试粘贴逻辑的参考基础坐标粘贴sheet.paste(0, 0, 0-0\t0-1\t...\n...)后getData()与期望二维数组一致test/paste.js范围倍数扩展选中 5 列粘贴 2 列数据时数据按倍数重复铺满[0-0, 0-1, 0-0, 0-1]test/paste.js隐藏列跳过type: hidden的列不会被粘贴命中test/paste.js隐藏行跳过通过hideRow(1)隐藏的行会被跳过test/paste.js。这些测试直接调用sheet.paste(sheet.selectedCell[0], sheet.selectedCell[1], pasteText)与文档中的paste(x, y, data)签名完全对应验证了坐标定位、倍数扩展与隐藏行列跳过等核心行为。注意事项与限制CE 版oncopy限制官方文档明确在 Jspreadsheet CE 中无法在oncopy事件期间取消或修改剪贴板值需要拦截/转换复制数据时应优先考虑在onbeforepaste阶段处理。粘贴拦截优先onbeforepaste是文档推荐的数据校验与转换入口返回false可取消粘贴返回字符串可替换粘贴内容。编辑态保护浏览器粘贴事件仅在网格可编辑options.editable ! false且未处于单元格编辑状态时生效events.js。Excel 兼容复制默认使用 Tab 分隔符并做 CSV 引号转义因此 Jspreadsheet 复制的数据可以直接粘贴进 Excel / Google Sheets反之亦然。公式联动粘贴写入走updateFormulaChain粘贴含公式数据时公式链会自动刷新Pro 版本额外提供公式引用位置的自动调整。延伸阅读配置设置了解allowInsertColumn、allowInsertRow、editable等影响剪贴板行为的配置项工作表管理getConfig/setConfig等工作表实例方法事件总览onafterchanges等全局事件的完整说明入门指南安装与初始化方式复制粘贴源码copy与paste的完整实现事件与快捷键源码pasteControls、cutControls、CtrlC/X/V处理粘贴测试用例坐标粘贴、倍数扩展、隐藏行列跳过的行为验证赞分享前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载相关推荐FontForge 的 X 选择与剪贴板PRIMARY/CLIPBOARD 机制与剪贴板数据格式深度解析FontForge 的 X 选择与剪贴板PRIMARY/CLIPBOARD 机制与剪贴板数据格式深度解析 本篇技术指南聚焦 FontForge 在 X Win桌面应用图形学Yakit 源码构建完整指南30分钟完成首次MITM劫持与Web模糊测试Yakit 源码构建完整指南30分钟完成首次MITM劫持与Web模糊测试 渗透测试里最磨人的往往不是漏洞本身而是 Burp、Nc、目录爆破脚本分散在好几个网络安全应用安全渗透测试漏洞扫描HuLa剪贴板跨平台剪贴板操作与集成HuLa剪贴板跨平台剪贴板操作与集成 引言 在现代即时通讯应用中剪贴板功能已成为提升用户体验的关键技术。HuLa作为一款基于Tauri v2Vue3的跨平即时通讯桌面应用前端上一篇如何专业配置Tracker服务器实现P2P下载的5倍加速下一篇gbert-large-openmind革命性德语大语言模型如何快速开始你的第一个德语NLP项目创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考