《苏州大二程序员的暑假“渡劫”日记：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度高温，我需要的是冰可乐啊！”**）
今日总结
- 技术栈：Vue2 + wangEditor5 + JSP + Oracle + 阿里云OSS
- 关键点：
mammoth.js提取Word内容+图片- 手动补CSS样式（表格、字体、颜色）
- JSP生成OSS签名（虽然老，但能用）
- 群友价值**：“一个人调试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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片
下载示例
点击下载完整示例
