wangEditor导入MathType公式保留矢量格式

《苏州大二程序员的暑假“渡劫”日记：Word图片转存+样式保留大作战》
日期：2023年7月18日 星期二 苏州 桑拿天（空调房里敲代码，命是奶茶给的）

第一章：需求暴击——客户爸爸的“变态”要求

“同学，我们想实现个功能：把Word里的图片和文字样式（表格、字体、颜色）全保留，上传到服务器，最后在网页编辑器里还能原样显示！”
我盯着微信对话框里的需求，手里的冰奶茶差点捏爆——“这哪是需求？这是让我用Vue2+wangEditor5复刻一个在线版Word啊！”

但暑假闲着也是闲着，不如趁机“渡劫”升级技能。
Flag立下：“7天内搞定，否则直播倒立吃键盘！”

第二章：组件狩猎——GitHub/Gitee“淘宝”记

目标1：提取Word内容+保留样式

• mammoth.js：能转Word为HTML，但样式只支持部分（比如字体加粗，但表格边框可能丢）。
  测试结果：

  标题 数据1

  吐槽：“这哪是保留样式？这是‘样式随机丢弃’啊！”

• docx-preview：能预览Word，但提取内容？官方文档：“本库只负责看，不负责摸。”
  灵机一动：“既然能预览，那是不是能‘偷’它的渲染逻辑？”
  （结果：预览是用Canvas画的，根本拿不到DOM结构，卒。）

• pizzip+docxtemplater：能解析Word的XML结构，但需要手动处理样式。
  测试结果：

  // 提取段落样式（部分代码）constparagraphs=doc.getJSON().sections[0].children;paragraphs.forEach(p=>{if(p.style&&p.style.name==='Heading1'){console.log('这是标题！',p.text);}});

  优点：能拿到原始样式数据；缺点：需要自己写CSS映射（比如把Word的“宋体 12pt 红色”转成CSS的font-family: SimSun; font-size: 12pt; color: red;）。

最终选择：mammoth.js+ 手动补样式（先保证功能，再优化体验）。

目标2：提取Word中的图片

• mammoth.js：能提取图片，但返回的是ArrayBuffer，需要转Blob上传。
  代码片段：

  constresult=mammoth.extractRawText({arrayBuffer:wordArrayBuffer});result.images.forEach((image,index)=>{constblob=newBlob([image.data],{type:image.contentType});// 上传Blob到服务器...});

  测试结果：图片能上传，但文件名是随机数（“客户爸爸说，图片得按‘文档名_序号’命名，否则财务部阿姨找不到！”）。

第三章：前端攻坚——Vue2 + wangEditor5的“魔改”之路

Step 1：让wangEditor5显示Word转换后的HTML

wangEditor5默认不支持直接插入HTML，但可以“偷渡”：

// src/components/Editor.vueimport{Editor}from'wangeditor5'import{Boot}from'@wangeditor5/core'// 自定义模块：允许插入HTMLBoot.registerModule({name:'htmlInsert',editor:Editor,config:(editor)=>{editor.commands.addCommand('insertHTML',(html)=>{constselection=editor.getSelection()if(selection){editor.insertText(' ')// 先插入空格占位constrange=selection.getRange()constfragment=editor.getModule('dom').createFragment(html)range.insertNode(fragment)}})}})// 使用示例consteditor=newEditor({selector:'#editor-container',config:{// 其他配置...}})editor.commands.execute('insertHTML','红色文字')

测试结果：

• 简单样式（颜色、加粗）能显示；
• 复杂样式（表格、嵌套列表）会乱码（“wangEditor5：你管这叫HTML？这是我从未见过的船新版本！”）。

Step 2：图片上传到阿里云OSS（后端JSP签名）

前端上传逻辑：

// src/utils/ossUploader.jsexportasyncfunctionuploadToOSS(file,fileName){// 1. 请求JSP后端获取OSS签名constsignResponse=awaitfetch('/api/oss-sign',{method:'POST',body:JSON.stringify({fileName})});constsignData=awaitsignResponse.json();// 2. 直接上传到OSS（无需经过自己服务器）constformData=newFormData();formData.append('key',signData.key);formData.append('policy',signData.policy);formData.append('OSSAccessKeyId',signData.accessId);formData.append('signature',signData.signature);formData.append('success_action_status','200');formData.append('file',file);constuploadResponse=awaitfetch(signData.host,{method:'POST',body:formData});returnuploadResponse.ok;}

JSP后端（简化版）：

<%@ page import="java.util.*, com.aliyun.oss.*" %> <% // 生成OSS上传签名（实际项目需加密处理） String accessKeyId = "your-access-key"; String accessKeySecret = "your-secret-key"; String endpoint = "oss-cn-suzhou.aliyuncs.com"; String bucket = "your-bucket"; // 生成POST上传策略 String policy = "{\"expiration\":\"2023-12-31T12:00:00.000Z\",\"conditions\":[[\"content-length-range\",0,104857600]]}"; String base64Policy = Base64.encodeBase64String(policy.getBytes()); String signature = com.aliyun.oss.common.utils.BinaryUtil.toBase64String( com.aliyun.oss.common.auth.HmacSHA1Calculator.calculate( accessKeySecret.getBytes(), base64Policy.getBytes() ) ); // 返回签名给前端 out.print("{\"accessId\":\"" + accessKeyId + "\",\"policy\":\"" + base64Policy + "\",\"signature\":\"" + signature + "\",\"host\":\"https://" + bucket + "." + endpoint + "\"}"); %>

测试结果：

• 图片成功上传到OSS；
• JSP代码被同学吐槽“像2005年的技术”（“但Oracle数据库说它喜欢老古董！”）。

第四章：群友神助攻——QQ群里的“救星”

在QQ群223813913里喊了一嗓子：
“求救！wangEditor5怎么完美显示Word转换的HTML？”
群友@北京-大佬：

“别用insertHTML！用customPaste模块拦截粘贴事件，手动解析HTML并转换样式！”

代码灵感：

// 自定义粘贴处理器editor.on('paste',(data)=>{if(data.type==='text/html'){constparser=newDOMParser();constdoc=parser.parseFromString(data.data,'text/html');// 手动处理表格样式consttables=doc.querySelectorAll('table');tables.forEach(table=>{table.style.borderCollapse='collapse';table.style.width='100%';// 遍历单元格添加边框...});// 替换编辑器内容editor.insertText('');// 清空选中区域constrange=editor.getSelection().getRange();constfragment=editor.getModule('dom').createFragment(doc.body.innerHTML);range.insertNode(fragment);}});

测试结果：

• 表格边框和颜色能显示了！
• 但嵌套列表还是乱（“wangEditor5：嵌套？不存在的！”）。

第五章：客户爸爸的“真香”现场

把测试链接发给客户后，回复如下：
“这功能！比我们之前用的在线文档还流畅！明天请你喝‘秋天的第一杯奶茶’！”
（内心OS**：“苏州40度高温，我需要的是冰可乐啊！”**）

今日总结

1. 技术栈：Vue2 + wangEditor5 + JSP + Oracle + 阿里云OSS
2. 关键点：
   • mammoth.js提取Word内容+图片
   • 手动补CSS样式（表格、字体、颜色）
   • JSP生成OSS签名（虽然老，但能用）
3. 群友价值**：“一个人调试BUG到凌晨，不如群里喊一嗓子！”**

明日计划：

• 优化表格样式（支持合并单元格）
• 写一篇技术博客《大二学生如何用Vue2+JSP复刻Word在线编辑》

（签名）
苏州·在空调房里敲代码的大二狗
2023年7月18日

P.S.：群里正在讨论“如何用Oracle存Word的样式数据”，欢迎来交流（“Oracle：我虽然老，但我能打！”）
QQ群：223813913（暗号：“Word转存”）

复制插件文件

安装jquery

npm install jquery

导入组件

importEfrom'wangeditor'const{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}=Eimport{WordPaster}from'../../static/WordPaster/js/w'import{zyCapture}from'../../static/zyCapture/z'import{zyOffice}from'../../static/zyOffice/js/o'

初始化组件

//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:'HelloWorld',data(){return{msg:'Welcome to Your Vue.js App'}},mounted(){vareditor=newE('#editor');WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:"http://localhost:8891/upload.aspx",License2:"",//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"http://localhost:8891{url}",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});zyCapture.getInstance({config:{PostUrl:"http://localhost:8891/upload.aspx",License2:'',FileFieldName:"file",Fields:{uname:"test"},ImageUrl:'http://localhost:8891{url}'}})// zyoffice，// 使用前请在服务端部署zyoffice，// http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:'http://localhost:13710/zyoffice/word/convert',wordExport:'http://localhost:13710/zyoffice/word/export',pdf:'http://localhost:13710/zyoffice/pdf/upload'})// 注册菜单E.registerMenu("zyCaptureBtn",zyCaptureBtn)E.registerMenu("WordPasterBtn",WordPasterBtn)E.registerMenu("ImportWordToImgBtn",ImportWordToImgBtn)E.registerMenu("NetImportBtn",NetImportBtn)E.registerMenu("WordImportBtn",WordImportBtn)E.registerMenu("ExcelImportBtn",ExcelImportBtn)E.registerMenu("PPTImportBtn",PPTImportBtn)E.registerMenu("PDFImportBtn",PDFImportBtn)E.registerMenu("importWordBtn",importWordBtn)E.registerMenu("exportWordBtn",exportWordBtn)E.registerMenu("importPdfBtn",importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length=0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2=newE('#editor2');//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length=0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}

测试前请配置图片上传接口并测试成功
接口测试
接口返回JSON格式参考

为编辑器添加按钮

components:{Editor,Toolbar},data(){return{editor:null,html:'dd',toolbarConfig:{insertKeys:{index:0,keys:['zycapture','wordpaster','pptimport','pdfimport','netimg','importword','exportword','importpdf']}},editorConfig:{placeholder:''},mode:'default'// or 'simple'}},

整合效果

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

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

Word转图片

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

导入PDF

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

导入PPT

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

上传网络图片

一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片

下载示例

点击下载完整示例