妞妞牛波先讲一个我亲历的现场：某芯片厂设备部门同事写好一张治具加工图的变更说明，原本在CAD里选中的零部件、标注和中心线都清清楚楚，粘贴进企业TinyMCE构造的变更单之后，页面里只剩一张模糊的位图。审签环节为了看清0.02mm的尺寸公差，最后只能对着原文件来回切窗口，图纸稍一缩小就锯齿满天飞。这类“CAD图纸粘贴到TinyMCE的矢量输出”问题，表面是编辑器能力不足，实际是整个工程内容生产链路里，格式、精度和数据来源三件事没理顺。
这篇文章面向的企业场景是：基于B/S架构建设芯片制造厂内部系统，比如NCR、ECN、设备变更、文控发布这类需要在线编辑图文内容的模块，前端富文本用TinyMCE，用户希望把CAD图纸里的局部或整图内容干净地放进文档，并保证后续Word、PDF导出时仍然是矢量效果。接下来我会从需求场景、技术选型、后端解析、编辑器接入、全文导出到踩坑实录，逐层把方案讲透。
很多参考做法都来源于我在厂里落地同类系统时的实际工程经验，不一定是最新唯一的路线，但每一步都是验证过的。
1. 先搞清楚场景：不是贴图，是图纸内容进文档
1.1 芯片厂里的“CAD图纸粘贴”是哪种场景
很多人一听到芯片制造企业里的CAD，会直接联想到芯片版图GDSII、OPC、Mask层那些东西。实际上厂内大量在TinyMCE这类浏览器编辑器里流转的CAD图纸，更多是设备布局图、治具加工图、二次配管图、机械结构装配图、备件图纸，这些图来自AutoCAD、中望CAD、浩辰CAD，有时也会涉及KLayout导出的版图截图。这类图纸的共同特点是：以图层、图元、块参照和标注为主体，并且对尺寸精度有硬性要求。
企业内容系统的典型入口通常是“新建变更单”“填写设备异常分析”“发布装配作业指导书”。操作者在CAD里框选需要说明的对象，执行Ctrl+C，然后切到浏览器里的TinyMCE，执行Ctrl+V。用户期望的效果是：目标区域的线条、文字、标注、填充都原样保留，之后任何人打开这份工单都能缩放查看细节，而不是一放大就是马赛克。
问题往往就从这里开始。浏览器里Ctrl+V拿不到CAD内部的矢量图元。页面在处理粘贴事件时，Windows剪贴板里“看起来存在”的矢量数据格式，比如EMF、增强型图元文件，并不能直接被HTML的img标签或TinyMCE的粘贴逻辑解释成SVG或Canvas。多数编辑器最后只会以一张PNG或JPEG位图接收剪贴板，而且这张位图的分辨率由当时的屏幕缩放决定，通常并不满足工程阅读要求。
1.2 位图粘贴为什么是工程文档的灾难
把CAD图纸变成位图再插入文档，在普通办公场景也许还能忍，放到芯片厂的工程文档里就是问题。设备安装图纸里动辄出现几微米到几十微米量级的尺寸标注，甚至是标注线之间细微的间隙。位图一旦经过在线预览压缩、Word导出重采样、PDF打印光栅化，极容易损失界线清晰度，更麻烦的是放大之后直接失真。审核人员如果对着位图判断某个定位孔有没有偏，等于把质量判断建立在一个降质副本上，这是工程管理不能接受的。
位图还有一个隐蔽问题：内容不可检索、不可选中、不可编辑。设备工程师想把图纸里某一行技术条件复制到邮件里，发现整张图都是一张图片，只能手工重新敲字。后续如果同一份图纸有多个版本，系统也无法通过图纸内容做版本标识、差异比对或合规追溯。时间一长，系统中堆积的“图片形态图纸”会让追溯链断裂。
从系统建设角度讲，用位图承载CAD内容，等于在数据源头就放弃了精度和结构化属性。因此核心目标不应该只是“让粘贴看起来清楚一点”，而是建立“CAD图元能进入HTML文档、并继续保持矢量属性”的通道。
1.3 矢量输出的本质：系统要交换的是什么
要理解如何解决这个问题，先要认识矢量输出到底在交换什么。CAD图面本质是一份由几何图元（线段、圆弧、多段线、样条线）、块引用、属性文字、标注样式、图层信息组成的结构化描述。贴在文档里的矢量对象需要保留这些几何描述本身，通常是数学坐标和样式规则，而不是像素颜色。
在Web场景中，这个问题被现实地分解成两部分。一是“可见性”：浏览器需要一种能直接渲染矢量图形的表达方式，目前最通用的是SVG。二是“互操作性”：CAD源文件DWG/DXF与SVG之间存在格式代差，不能直接把二进制DWG塞给TinyMCE，需要有转换动作。
真正的实战思路是做一个组合方案：在CAD端或后端图纸服务端，把用户选择的区域输出成“工程语义完整、Web可渲染”的SVG内容，再由TinyMCE以可编辑HTML片段的方式承载。至于最终的Word/PDF输出，则保存原始DWG/DXF文件引用，或者保存已经转换好的高保真SVG底稿，在服务器端按目标格式再次处理。这样至少能保证：在线阅读不退化，导出成品不降质，追溯时还能找到原图。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型：解决“CAD到浏览器”桥的四种思路
2.1 浏览器为什么拿不到CAD的矢量数据
浏览器能读取的图片格式非常有限：PNG、JPEG、GIF、WebP，以及