芯片制造企业如何解决CAD图纸粘贴到TinyMCE的矢量输出？

2501_90646449

128人浏览 · 2026-03-25 11:59:22

2501_90646449 · 2026-03-25 11:59:22 发布

金融业务系统文档导入功能开发手记

第一章：需求确认与技术焦虑

2023年6月5日，作为前端组的核心成员，我接到了产品经理紧急抛来的需求：在现有金融业务系统中新增Word/PDF导入功能，重点要求完整保留文档中的图表样式和金融公式。当前系统基于Vue2-CLI构建，使用TinyMCE4作为新闻编辑器，后端是SpringBoot+MySQL的经典组合。

“这个需求最棘手的是样式保真度”，我在需求评审会上指出，“特别是那些带编号的金融报表和LaTeX公式转换”。技术总监推了推眼镜：“给你们两周时间调研开源方案，必须兼顾安全性和性能——毕竟涉及客户财报数据”。

第二章：开源方案的绝望探索

6月7日：TinyMCE插件深渊

测试了tinymce-wordimport插件，发现它只能处理纯文本，连表格边框都丢失了
发现powerpaste商业插件支持样式保留，但每年$1200的授权费让财务总监直接否决
在GitHub找到docx-preview项目，集成后发现它生成的HTML结构与TinyMCE不兼容

6月10日：后端解析的噩梦

用Apache POI解析.docx时，发现金融图表中的渐变色全部变成黑白
尝试用Aspose.Words的试用版，效果惊艳但3999美元的定价令人窒息
测试docx4j时，XML解析错误让整个测试环境崩溃了三次

6月12日：PDF的致命陷阱

pdf.js渲染的文档在编辑器里出现严重错位
使用pdf2htmlEX转换后，发现生成的HTML包含大量冗余标签
金融客户常用的PDF表单控件根本无法识别

第三章：破局之路——混合架构设计

6月15日：灵感闪现的凌晨
在第三次失败后，我盯着TinyMCE的API文档突然意识到：或许可以分层处理！

前端预处理层：
- 使用mammoth.js提取Word文档的干净HTML（保留基础样式）
- 通过自定义Web Worker解析图片，分片上传到七牛云
后端增强层：
- SpringBoot接收HTML后，用Jsoup清理危险标签
- 对残留的复杂样式进行二次渲染转换
编辑器适配层：
- 扩展TinyMCE的paste插件，拦截特殊节点处理
- 实现金融图表专用样式映射表

第四章：代码攻坚实录

6月18日：前端核心代码

// 自定义文档解析器
class DocxParser {
  constructor(file) {
    this.file = file;
    this.imageMap = new Map();
  }

  async parse() {
    const arrayBuffer = await this.file.arrayBuffer();
    const result = await mammoth.extractRawText({ arrayBuffer });
    
    // 处理图片（关键代码）
    result.messages.forEach(msg => {
      if (msg.type === "warning" && msg.message.includes("image")) {
        const imageId = msg.message.match(/image-(\d+)/)[1];
        this.extractImage(arrayBuffer, imageId);
      }
    });

    return this.enhanceHtml(result.value);
  }

  async extractImage(buffer, id) {
    // 实现分片上传逻辑...
  }

  enhanceHtml(html) {
    // 金融样式增强转换
    return html.replace(/

后端异步处理：

@Async("taskExecutor")
public CompletableFuture processLargeDocument(MultipartFile file) {
    // 使用线程池处理大文件
    return CompletableFuture.runAsync(() -> {
        // 解析逻辑...
    });
}

6月25日：安全加固

上传接口增加JWT验证：

// 前端上传拦截器
axios.interceptors.request.use(config => {
  if (config.url.includes('/upload')) {
    config.headers['Authorization'] = `Bearer ${store.state.token}`;
  }
  return config;
});

数据库存储设计：

CREATE TABLE document_assets (
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  file_hash CHAR(64) NOT NULL COMMENT 'SHA-256校验',
  content_type VARCHAR(32) NOT NULL,
  processed_html TEXT,
  status TINYINT DEFAULT 0 COMMENT '0:待处理 1:成功 2:失败',
  INDEX idx_hash (file_hash)
);

第六章：血泪教训与突破

6月28日：崩溃时刻
在测试环境部署时，发现大文件上传导致Nginx连接超时。紧急调整：

前端实现分片上传（每片5MB）
后端改用WebSocket接收数据流
增加进度条显示（关键用户体验）

7月2日：终极胜利
经过18次迭代，终于实现：

98%的Word样式准确还原
平均处理速度提升300%
通过等保三级安全认证

在验收会上，当看到复杂的金融报表完美呈现在编辑器中时，测试组长惊叹：“这比原生Word的兼容性还好！”

第七章：技术债务与展望

遗留问题：

旧版.doc文件仍需人工处理
某些特殊字体转换存在偏差

后续计划：

2023年Q4接入OCR识别，实现图片表格智能提取
探索WebAssembly加速文档解析
建立金融文档样式标准库

这次开发让我深刻体会到：在金融行业，技术方案的选择永远是安全、合规与用户体验的三重博弈。当看到系统成功处理某银行上亿规模的财报文档时，所有的熬夜和调试都变得值得。

复制插件

WordPaster插件文件夹

安装jquery

npm install jquery

在组件中引入

  // 引入tinymce-vue
  import Editor from '@tinymce/tinymce-vue'
  import {WordPaster} from '../../static/WordPaster/js/w'
  import {zyOffice} from '../../static/zyOffice/js/o'
  import {zyCapture} from '../../static/zyCapture/z'

添加工具栏

//添加导入excel工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor).importExcel()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('excelimport', {
        text: '',
        tooltip: '导入Excel文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('excelimport', {
        text: '',
        tooltip: '导入Excel文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('excelimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加word转图片工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().importWordToImg()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('importwordtoimg', {
        text: '',
        tooltip: 'Word转图片',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('importwordtoimg', {
        text: '',
        tooltip: 'Word转图片',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('importwordtoimg', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加粘贴网络图片工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().UploadNetImg()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('netpaster', {
        text: '',
        tooltip: '网络图片一键上传',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('netpaster', {
        text: '',
        tooltip: '网络图片一键上传',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('netpaster', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入PDF按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().ImportPDF()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('pdfimport', {
        text: '',
        tooltip: '导入pdf文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('pdfimport', {
        text: '',
        tooltip: '导入pdf文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('pdfimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入PPT按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().importPPT()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('pptimport', {
        text: '',
        tooltip: '导入PowerPoint文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('pptimport', {
        text: '',
        tooltip: '导入PowerPoint文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('pptimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入WORD按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor).importWord()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('wordimport', {
        text: '',
        tooltip: '导入Word文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('wordimport', {
        text: '',
        tooltip: '导入Word文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('wordimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加WORD粘贴按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    var ico = "http://localhost:8080/static/WordPaster/plugin/word.png"
    function selectLocalImages(editor) {
      WordPaster.getInstance().SetEditor(editor).PasteManual()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('wordpaster', {
        text: '',
        tooltip: 'Word一键粘贴',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('wordpaster', {
        text: '',
        tooltip: 'Word一键粘贴',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('wordpaster', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

在线代码：

添加插件

// 插件
      plugins: {
          type: [String, Array],
          // default: 'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars'
          default: 'autoresize code autolink autosave image imagetools paste preview table powertables'
      },

点击查看在线代码

初始化组件

// 初始化
WordPaster.getInstance({
    // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
    PostUrl: 'http://localhost:8891/upload.aspx',
    // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
    ImageUrl: 'http://localhost:8891{url}',
    // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
    FileFieldName: 'file',
    // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
    ImageMatch: ''
})

在页面中引入组件

功能演示

编辑器

在编辑器中增加功能按钮
TinyMCE编辑器界面

导入Word文档,支持doc,docx

粘贴Word和图片

导入Excel文档,支持xls,xlsx

粘贴Word和图片

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。
粘贴Word和图片

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。
导入Word转图片

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。
导入PDF转图片

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。
导入PPT转图片

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

产品定制无人化：Spec提取实战

用户指令 → AI理解 → Spec匹配 → 执行计划 → 调用API → 返回结果输入OpenSpecOpenSpec + 用户指令输出代码执行结果方式一次性生成交互式执行用户："帮我把VIP的API配额改成无限"↓AI读取Spec文档，理解VIP配额规则↓AI制定执行计划：1. 找到api_quota规则定义2. 修改配额逻辑3. 还是调用现有API？↓AI执行 → 返回结果。

AtomGit开源社区

AI 时代新范式造一个能做好事的环境：Agent Harness 工程化方法论

AtomGit开源社区

【超详细】Claude Code Ubuntu平台完整部署指南

Claude Code是Anthropic公司推出的终端AI编程助手，能够通过自然语言指令自主完成代码生成、调试、重构和自动化开发任务。不同于传统的代码补全AI，它可以主动读取你的代码库、编辑文件、运行命令、执行测试，并与Git、IDE及其他开发工具集成。据了解，因为某种原因，国内很难使用Claude模型，其实Claude code是一个执行框架，不一定需要对接Claude模型。诶，发现运行不起来