news 2026/6/15 12:06:41

军工领域OA系统如何实现Word公式精准粘贴？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
军工领域OA系统如何实现Word公式精准粘贴？

【国企项目手记：企业网站后台管理系统富文本编辑器功能扩展开发全记录】
项目负责人：XXX（北京某国企）
日期：2023年X月X日

一、需求分析与技术选型

1. 核心需求梳理

客户要求在企业网站后台管理系统的文章发布模块中扩展以下功能：

  • Word粘贴功能：支持从Word复制内容直接粘贴到UEditor，图片自动上传至阿里云OSS（二进制存储），保留表格、字体、颜色等样式。
  • 多格式文档导入功能：支持上传Word/Excel/PPT/PDF文档，解析内容并保留图片和样式，图片自动上传至OSS。
  • 微信公众号内容粘贴：自动下载公众号文章图片并上传至OSS，避免版权风险。
  • 信创兼容性：
    • 操作系统：Windows/macOS/Linux（含中标麒麟、银河麒麟、统信UOS等国产系统）。
    • 浏览器：IE8+、奇安信安全浏览器、龙芯浏览器、红莲花安全浏览器等。
    • CPU架构：x86（Intel/AMD/兆芯/海光）、ARM（鲲鹏/飞腾）、龙芯（MIPS/LoongArch）。
  • 授权模式：买断产品源代码，预算≤88万元，满足自主可控及数据安全要求，支持集团1000+项目复用。
2. 技术栈锁定
  • 前端：Vue2 CLI + UEditor（百度开源富文本编辑器，需二次开发）。
  • 后端：SpringBoot（IntelliJ IDEA开发），MySQL数据库。
  • 云存储：阿里云OSS（需SDK集成）。
  • 信创环境：通过交叉编译、Polyfill及兼容性测试覆盖国产系统及浏览器。
3. 选型评估
  • 富文本编辑器扩展方案：
    • UEditor原生插件：
      • 优点：开源免费，可自主修改代码。
      • 缺点：无现成Word导入插件，需自行开发或集成第三方库（如mammoth.js、docx.js，但兼容性不足）。
    • 商业插件对比：
      • TinyMCE Enterprise：支持Word粘贴和样式保留，但授权费超预算（单套$5,000+，源代码买断需谈判）。
      • CKEditor 5 Premium：功能匹配，但国产化兼容性存疑（IE8不支持）。
      • 国内方案：
        • UEditor定制开发：基于开源版本扩展，成本低但需解决复杂文档解析（如PPT转HTML）。
        • XX信创富文本编辑器（国产）：
          • 支持全信创环境（包括龙芯MIPS架构）。
          • 提供Word/Excel/PPT/PDF导入API，图片自动上传至OSS。
          • 买断源代码授权费用78万元，剩余预算可用于应急储备。
    • 最终决策：
      • 主方案：采购XX信创富文本编辑器（国产），满足自主可控及信创硬指标。
      • 备选方案：若预算不足，则基于UEditor二次开发，但需评估信创兼容性风险。

二、开发过程记录

1. 前端集成（Vue2 + UEditor + 信创适配）

  • 步骤1：UEditor信创兼容适配

    • 替换UEditor核心库为信创兼容版本（修复IE8下Array.prototype.indexOf等兼容性问题）。
    • 引入es5-shim和es5-sham解决IE8缺少的ES5特性。
    • 自定义工具栏按钮，新增“Word导入”和“公众号粘贴”入口。

  • 步骤2：Word粘贴功能实现

    • 监听粘贴事件：通过ue.addListener('paste', handlePaste)捕获粘贴内容。
    • 图片处理：
      • 使用Clipboard API提取图片二进制数据，通过AJAX上传至后端SpringBoot接口。
      • 后端返回OSS图片URL后，替换为``标签。
    • 样式保留：
      • 通过正则匹配Word生成的HTML标签（如、），转换为UEditor支持的标准标签。

前端代码示例（Word粘贴处理）：

// 监听粘贴事件ue.addListener('paste',function(editor){constclipboardData=window.clipboardData||event.clipboardData;if(clipboardData.files.length>0){// 处理粘贴的图片constfile=clipboardData.files[0];if(/^image\//.test(file.type)){constformData=newFormData();formData.append('file',file);axios.post('/api/uploadToOSS',formData).then(res=>{editor.execCommand('insertHtml',``);});}}else{// 处理文本和样式consthtml=clipboardData.getData('text/html')||clipboardData.getData('text');constcleanedHtml=cleanWordHtml(html);// 自定义函数：过滤Word冗余标签editor.execCommand('insertHtml',cleanedHtml);}});// 信创浏览器兼容性修复（IE8）if(!Array.prototype.indexOf){Array.prototype.indexOf=function(item){for(leti=0;i<this.length;i++){if(this[i]===item)returni;}return-1;};}
2. 后端开发（SpringBoot + 阿里云OSS）
  • 步骤1：文档解析服务
    • 使用Apache POI解析Word/Excel/PPT，PDFBox解析PDF，提取文本和图片。
    • 示例代码（解析Word文档）：
// SpringBoot示例：解析Word文档并上传图片至OSS@PostMapping("/importWord")publicStringimportWord(@RequestParam("file")MultipartFilefile)throwsIOException{XWPFDocumentdocument=newXWPFDocument(file.getInputStream());StringBuilderhtml=newStringBuilder();for(XWPFParagraphparagraph:document.getParagraphs()){html.append("").append(paragraph.getText()).append("");}for(XWPFTabletable:document.getTables()){html.append("");// 解析表格行和单元格...html.append("");}// 提取文档中的图片并上传至OSS...returnhtml.toString();}
  • 步骤2：图片上传至OSS
    • 集成阿里云OSS SDK，实现图片二进制流上传：
// SpringBoot示例：上传图片至OSS@PostMapping("/uploadToOSS")publicResponseEntity>uploadToOSS(@RequestParam("file")MultipartFilefile){StringfileName=UUID.randomUUID().toString()+"."+StringUtils.getFilenameExtension(file.getOriginalFilename());OSSossClient=newOSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);ossClient.putObject(bucketName,fileName,file.getInputStream());ossClient.shutdown();Mapresult=newHashMap<>();result.put("url","https://"+bucketName+"."+endpoint+"/"+fileName);returnResponseEntity.ok(result);}
3. 信创兼容性测试
  • 测试环境：
    • 操作系统：中标麒麟7.6、统信UOS 20、龙芯3A5000（LoongArch架构）。
    • 浏览器：IE8、奇安信安全浏览器（Chromium内核）、龙芯浏览器（MIPS架构）。
  • 问题修复：
    • 龙芯浏览器字体渲染异常：指定中文字体族（如font-family: "SimSun", "宋体"）。
    • IE8下AJAX上传失败：改用jQuery.ajax并设置contentType: false。

三、综合评估与成果

1. 方案对比
方案成本兼容性开发周期授权模式
UEditor二次开发25万元（人力）需额外适配龙芯MIPS4个月开源免费
XX信创富文本编辑器78万元（买断）全信创环境支持2个月永久授权（含升级）
2. 最终决策
  • 选择XX信创富文本编辑器：
    • 满足自主可控及信创硬指标，减少兼容性风险。
    • 买断授权费用78万元，剩余预算可用于应急储备。
    • 提供完整的Word/Excel/PPT/PDF导入API，降低开发复杂度。
3. 交付成果
  • 功能上线后，客户验收通过率100%，文章发布效率提升60%。
  • 代码仓库：内网GitLab私有库（含信创适配分支）。
  • 文档：《信创环境部署指南》《阿里云OSS集成开发手册》《政府项目安全合规报告》。

结语：本次项目通过“商业插件+信创适配”策略，在预算内高效完成了需求，同时为集团后续政企项目积累了国产化兼容经验。下一步计划将UEditor逐步迁移至国产信创富文本编辑器，进一步统一技术栈。

复制插件目录

引入插件文件

UEditor 1.4.3.3示例

注意：不要重复引入jquery，如果您的项目已经引入了jq，则不用再引入jq-1.4

在工具栏中增加插件按钮

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义toolbars:[["fullscreen","source","|","zycapture","|","wordpaster","importwordtoimg","netpaster","wordimport","excelimport","pptimport","pdfimport","|","importword","exportword","importpdf"]]

初始化控件

varpos=window.location.href.lastIndexOf("/");varapi=[window.location.href.substr(0,pos+1),"asp/upload.asp"].join("");WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});//加载控件

注意

如果接口字段名称不是file，请配置FileFieldName。ueditor接口中使用的upfile字段

点击查看详细教程

配置ImageMatch

匹配图片地址，如果服务器返回的是JSON则需要通过正则匹配

ImageMatch:'',

点击参考链接

配置ImageUrl

为图片地址增加域名，如果服务器返回的图片地址是相对路径，可通过此属性添加自定义域名。

ImageUrl:"",

点击查看详细教程

配置SESSION

如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。
参考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

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

Word转图片

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

导入PDF

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

导入PPT

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

上传网络图片

下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/6/14 1:37:17

Atelier of Light and Shadow实现医院预约系统智能化：流程优化实战

Atelier of Light and Shadow实现医院预约系统智能化&#xff1a;流程优化实战 1. 当挂号排长队成为过去式 上周陪家人去三甲医院做复查&#xff0c;早上七点就在门诊楼外排起长队。取号机前挤着二十多人&#xff0c;导诊台的护士声音已经沙哑&#xff0c;而电子屏上显示“今…

作者头像 李华
网站建设 2026/5/30 5:59:34

全球20家最贵独角兽全拆解：为什么它们能撑起千亿估值？

出品&#xff5c;《态度》栏目 作者&#xff5c;袁宁 编辑&#xff5c;丁广胜 2月初&#xff0c;千亿美元独角兽名单发生了一次不算剧烈、却颇具象征意义的变化。 当地时间 2 月 2 日&#xff0c;Alphabet 旗下自动驾驶公司 Waymo 在官方博客宣布完成 160 亿美元融资&#xff0…

作者头像 李华
网站建设 2026/5/17 6:53:43

ERNIE-4.5-0.3B-PT模型压缩对比：从剪枝到量化全面评测

ERNIE-4.5-0.3B-PT模型压缩对比&#xff1a;从剪枝到量化全面评测 1. 为什么压缩这个小而精的模型值得认真对待 ERNIE-4.5-0.3B-PT这个名字听起来可能有点陌生&#xff0c;但它背后代表的是一个特别务实的选择——在保持足够语言能力的同时&#xff0c;把模型体积控制在3.6亿…

作者头像 李华
网站建设 2026/5/31 10:33:00

CogVideoX-2b应用场景：房地产项目可视化视频自动生成

CogVideoX-2b应用场景&#xff1a;房地产项目可视化视频自动生成 1. 为什么房地产营销急需“文字变视频”能力 你有没有见过这样的场景&#xff1a;某高端住宅项目刚封顶&#xff0c;销售团队急着做推广&#xff0c;但专业视频团队排期要两周&#xff0c;外包报价动辄上万元&…

作者头像 李华
网站建设 2026/6/7 12:15:03

移动端适配挑战：AI超清画质增强输出分辨率调整技巧

移动端适配挑战&#xff1a;AI超清画质增强输出分辨率调整技巧 在手机屏幕越来越高清、用户对视觉体验要求越来越高的今天&#xff0c;一张模糊的截图、压缩过度的网图、或者年代久远的老照片&#xff0c;往往刚打开就让人皱眉。更麻烦的是&#xff0c;这些图片直接用在App界面…

作者头像 李华
网站建设 2026/6/14 16:42:20

GLM-4-9B-Chat-1M法律合同解析：vLLM部署下的条款比对系统

GLM-4-9B-Chat-1M法律合同解析&#xff1a;vLLM部署下的条款比对系统 1. 当法律文书遇上长文本大模型 最近帮一家律所朋友处理一批并购合同&#xff0c;发现他们还在用Excel表格手动比对几十份协议里的违约责任条款。一份合同平均两万字&#xff0c;光是把关键段落复制粘贴到…

作者头像 李华