尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Univer 电子表格剪贴板模块设计:基于 HTML 格式的跨软件数据交换

Univer 电子表格剪贴板模块设计:基于 HTML 格式的跨软件数据交换 Univer 电子表格剪贴板模块设计基于 HTML 格式的跨软件数据交换【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univerUniver 的 Sheet 剪贴板模块SheetClipboardService以 HTML 作为核心交换载体使表格数据能够在 Univer 与 Excel、Google Sheets、飞书表格等外部电子表格软件之间无损复制与粘贴。本文以 packages/sheets-ui/src/services/clipboard/README.md 的设计文档为骨架结合模块源码与测试用例完整讲解 HTML 剪贴板格式的序列化USM→HTML与解析HTML→USM双向链路、MSO 专有样式的兼容策略以及复制/粘贴服务的整体工作流帮助你掌握 Univer 剪贴板互操作能力的底层实现。模块定位为什么剪贴板需要 HTML 格式在设计文档的开篇Univer 明确了剪贴板模块的设计动机To communicate with other spreadsheet softwares, we support HTML format to store the data in clipboard.与普通文本复制不同电子表格的复制/粘贴需要同时携带三类信息单元格值数字、字符串、公式、富文本单元格样式字体、颜色、对齐、边框、背景行列结构行高、列宽、合并单元格rowSpan/colSpan。纯文本格式只能表达第一类信息而 HTML 的table结构天然具备表达全部三类信息的能力并且是 Excel、Google Sheets 等主流电子表格软件都认可的系统剪贴板格式。因此 Univer 选择 HTML 作为对外交换格式同时在内部分别维护纯文本plain与结构化数据兼顾外部兼容与内部性能。该模块的完整实现位于 packages/sheets-ui/src/services/clipboard/目录结构清晰地反映了设计上的两条链路usm-to-html/convertor.ts复制方向将 Univer 内部单元格矩阵USMUniver Sheet Model序列化为 HTMLhtml-to-usm/converter.ts粘贴方向将外部 HTML 解析回单元格矩阵。HTML 格式一张标准的三行三列表格设计文档给出了一段完整的剪贴板 HTML 示例展示了一个 3×3 数字矩阵19如何被编码为 HTML 表格。以下是原文示例配合注释理解其结构html body style typetext/css/style table xmlnshttp://www.w3.org/1999/xhtml cellspacing0 cellpadding0 dirltr border1 styletable-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none !-- col style -- colgroup col width100 / col width100 / col width100 / /colgroup tbody !-- row style -- tr styleheight:21px; td styleborder-right:1px solid #000000;overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;>const html google-sheets-html-origintable>function wrapHtmlForExcel(html: string): string { const table html.match(/table[\s\S]*\/table/)?.[0] ?? html; return html xmlns:ourn:schemas-microsoft-com:office:office xmlns:xurn:schemas-microsoft-com:office:excel xmlnshttp://www.w3.org/TR/REC-html40headmeta http-equivContent-Type contenttext/html; charsetutf-8meta nameProgId contentExcel.Sheetmeta nameGenerator contentUniver/headbody!--StartFragment--${table}!--EndFragment--/body/html; }该包装为 HTML 补充 Office/Excel 命名空间、ProgIdExcel.Sheet与 UTF-8 声明让 Excel 能直接识别并粘贴。写入时同时提供纯文本plain、包装后的 HTML 以及可选的公式专用 MIME 负载web application/x-univer-sheets-formula见 clipboard.service.ts 第 144 行。粘贴方向HTML 到 USM 的解析粘贴 HTML 时SheetClipboardService._pasteExternal调用HtmlToUSMService.convert(html)converter.ts 第 127-262 行返回IUniverSheetCopyDataModelrowProperties行高、colProperties列宽与cellMatrix单元格矩阵。解析流程可概括为五步识别粘贴来源插件通过checkPasteType(html)匹配 Word / 飞书 / Univer 插件见下文以决定启用哪套样式规则与后处理规则DOM 解析与样式表收集parseToDom(html)生成 DOM并将style内 CSS 规则按选择器存入_styleMap。值得一提的是代码将style元素移入 Shadow DOM 再读取cssRules以规避浏览器对mso-*私有属性的丢弃converter.ts 第 138-155 行非表格文本预处理利用段落paragraphs把剪贴板中的普通文本分行逐行写入矩阵第一列表格解析逐个table调用_parseTable内部再细分parseColGroup列宽、parseTableRows行高与_parseTableByHtml单元格矩阵合并与富文本还原将非表格文本矩阵与各表格矩阵拼接进同一个valueMatrix返回。样式解析的优先级单元格样式通过_getStyle按“内联样式 类选择器 ID 选择器 标签选择器 继承样式”的优先级合并converter.ts 第 336-389 行可识别的样式键定义在sheetStyleRules常量中converter.ts 第 43-64 行const sheetStyleRules: string[] [ // Rich Text Style Rules color, background, font-size, text-align, vertical-align, font-weight, font-style, font-family, text-decoration, white-space, word-wrap, // Border Style Rules border-left, border-right, border-top, border-bottom, // Custom Style Rules --data-rotate, ];其中--data-rotate是 Univer 自有的自定义 CSS 变量用于旋转角度的兼容。合并单元格与相邻边框去重_parseTableByHtmlconverter.ts 第 459-577 行逐行逐单元格解析rowSpan/colSpan属性并做两件关键处理合并区样式扩散setMergedCellStyle把左上角单元格的样式克隆到合并区内的所有单元格保证粘贴后合并区域外观完整converter.ts 第 953-987 行相邻边框去重当上方单元格带border-bottom、左侧单元格带border-right时自动移除当前单元格的border-top/border-left避免粘贴后出现双重边框converter.ts 第 487-505 行。粘贴来源插件Word、飞书与 Univer设计上解析器采用插件机制扩展不同来源的 HTML 处理规则。插件接口IPastePlugin定义在 paste-plugins/type.ts由name、checkPasteType(html)、stylesRules与afterProcessRules组成。内置三个插件注册于 clipboard.service.ts 第 179-181 行插件匹配特征职责WordPastePluginplugin-word.tsWord 复制产生的 HTML 标记处理 Word 特有的段落样式LarkPastePluginplugin-lark.ts飞书表格复制产生的标记适配飞书的表格结构UniverPastePluginplugin-univer.ts正则/UniverNormal/i匹配p classUniverNormal将段落p转换为文档段落并携带段落样式plugin-univer.ts 第 22-56 行HtmlToUSMService.use(plugin)为静态方法插件在服务实例化前通过模块副作用注册。MSO 专有样式兼容mso-number-format 与 Excel 识别设计文档以 “MSO” 单独成节点明了对 Microsoft Office 专有 HTML 约定的兼容诉求。源码中主要体现在两点1. mso-number-format 数字格式还原Excel 复制出的 HTML 会把单元格数字格式写成 CSS 属性mso-number-format。Univer 在解析时先用_parseMsoNumfmtFromCssText从原始 CSS 文本中正则提取mso-number-format值因为浏览器解析 CSS 时会丢弃mso-*私有属性必须在移动style节点前读取见 converter.ts 第 264-294 行通过decodeMsoNumberFormat解码 Excel 的反斜杠转义如\0022→见 converter.ts 第 995-1000 行用numfmt.isValidFormat校验跳过Percent这类 Excel 命名格式Univer 无法直接作为 pattern 使用改由显示值反推单元格级通过_getMsoNumfmtForNode按“类 ID 标签”的选择器优先级查找对应格式converter.ts 第 300-310 行并配合getNumfmtParseValueFilter校验“按此格式格式化后与显示文本一致”确认后才写入s.n.pattern。2. Excel 来源识别与 Windows 快捷键提示粘贴时utils.ts 的htmlIsFromExcel通过一组特征正则判断 HTML 是否来自 Excel包括td上的class...xl...Excel 单元格类名xmlns:xurn:schemas-microsoft-com:office:excel命名空间ProgIdExcel.Sheetmso-/mso-excel样式标记x:ExcelWorkbook元数据。在 Windows 平台上若检测到来自 Excel 且非 Univer 内部复制无data-copy-id缓存命中paste()会弹出提示建议用户改用快捷键以尽量完整地粘贴 Excel 剪贴板内容clipboard.service.ts 第 400-408 行。复制/粘贴服务整体工作流围绕 HTML 双向转换SheetClipboardService还提供了完整的生命周期管理其接口定义在 clipboard.service.ts 第 183-209 行。复制copy / cutcopy()的流程clipboard.service.ts 第 310-370 行获取当前选区SheetsSelectionsService.getCurrentLastSelection调用generateCopyContent生成复制内容按范围读取worksheet.getMatrixWithMergedCells得到矩阵克隆为matrixFragment同时生成纯文本plain与 HTML把{ unitId, subUnitId, range, matrix, copyType }写入CopyContentCacheLRU 容量为 10见 copy-content-cache.ts 第 23、44-45 行通过_clipboardInterfaceService.write(plain, wrapHtmlForExcel(html), 公式MIME负载)写入系统剪贴板用_markSelectionService在复制区域绘制虚线选区标记copy 高亮框。cut()与copy()复用同一实现仅将copyType置为COPY_TYPE.CUTclipboard.service.ts 第 372-376 行。内部粘贴时会根据copyType在粘贴后清理源区域。粘贴的三种路径paste(item, pasteType)clipboard.service.ts 第 378-437 行依据剪贴板内容分派路径触发条件处理内部粘贴HTML 含data-copy-id且缓存命中_pasteInternal直接用缓存的矩阵不再解析 HTML并叠加目标区合并单元格的合成样式外部 HTML 粘贴有 HTML 且不含 base64 图片_pasteExternalHtmlToUSMService.convert解析 → 合并单元格冲突检测 → 生成 mutation纯文本粘贴只有文本_pastePlainText若含\n/\t先经convertTextToTable转成 HTML 表格再粘贴utils.ts 第 294-311 行外部粘贴过程中_pasteUSM是最终执行者它会调用各注册 hook 的onPasteCells/onPasteRows/onPasteColumns等方法生成 undo/redo mutation经ICommandService执行后压入撤销栈clipboard.service.ts 第 684-738 行。对于超大粘贴区spilitLargeSetRangeValuesMutations会将单条SetRangeValuesMutation按“每块最多 2500 个单元格、超过 6000 个单元格才拆分、最多 10 块”的策略切分避免单条 mutation 过大utils.ts 第 184-266 行。粘贴选项Paste Optionspaste()支持pasteType参数预定义类型见 clipboard.service.ts 第 118-135 行复制方向default-copy、special-copy-formula-only粘贴方向default-paste、default-paste-rows、default-paste-columns、special-paste-value、special-paste-format、special-paste-col-width、special-paste-besides-border、special-paste-formula。粘贴后缓存解析结果IPasteOptionCache用户可通过粘贴选项菜单以新的pasteType重新粘贴rePasteWithPasteType先撤销再重贴clipboard.service.ts 第 462-486 行。钩子机制功能扩展点ISheetClipboardHook定义于 type.ts 第 85-284 行是模块最重要的扩展点允许各功能在复制/粘贴的各个阶段插入逻辑onBeforeCopy/onAfterCopy复制前准备缓存、复制后清理onCopyCellStyle/onCopyRow/onCopyColumn决定写入 HTML 的属性onPasteCells/onPasteRows/onPasteColumns/onPastePlainText/onPasteFiles生成粘贴 mutationgetFilteredOutRows跳过被过滤如筛选隐藏的行getCellValueBySpecialMatrix/handleMatrixOnCell覆盖单元格取值逻辑。钩子按priority降序插入clipboard.service.ts 第 492-515 行同一id不允许重复注册。测试验证该模块配套了完整的 Vitest 测试可作为理解行为的可执行文档Excel 粘贴clipboard-paste-form-excel.spec.ts 使用excel-base-sample.xlsx及其 HTML 资产assets/html/excel-base-sample.html含xmlns:x、ProgId、mso-等 Excel 标记验证值、样式、边框、行高列宽的还原Google Sheets 粘贴clipboard-paste-from-google.spec.ts 验证data-sheets-value风格的来源记事本/纯文本粘贴clipboard-paste-from-notepad.spec.ts 验证纯文本按\t/\n转表格工具函数utils.spec.ts 对getRepeatRange的重复区域展开、mergeSetRangeValues的 mutation 合并、spilitLargeSetRangeValuesMutations的分块行为做了逐例断言另有样式类测试覆盖字体、对齐、边框、旋转角rotate等专项见 clipboard 测试目录。小结Univer 剪贴板模块的设计可以概括为一句话以 HTMLtable为通用交换协议以data-copy-id与 LRU 缓存实现内部快路径以mso-*与来源插件兼容外部软件。复制时USMToHtmlService把单元格矩阵序列化为携带完整样式与行列属性的 HTML并包装成 Excel 可识别的格式粘贴时HtmlToUSMService将来自 Excel、Google Sheets、飞书、Word 或纯文本的剪贴板内容反向解析为 Univer 单元格模型最终经 mutation 写入工作表并进入撤销栈。设计文档中简短的 “HTML format” 与 “MSO” 两节在源码层面展开为一条覆盖序列化、解析、来源识别、格式还原、缓存与钩子扩展的完整链路这也是 Univer 能与其他电子表格软件顺畅互拷互贴的基础。【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表