拯救秃头程序员系列：Word一键粘贴功能开发记 🚀
作为福建某知名（自封的）JAVA程序员，我最近接了个CMS官网项目，客户要求增加Word一键粘贴功能，这简直是要把我本就不富裕的发量再薅掉几根…
需求背景
客户：“小王啊，我们那些老领导用Word几十年了，你让他们在网页编辑器里排版？不如直接让他们去跳广场舞！”
我：🙄（内心OS：得，又要加班了）
技术选型
经过七七四十九天的调研（其实就是百度了3小时），发现市面上的方案都像方便面包装上的牛肉——仅供参考！于是决定自己动手丰衣足食。
前端方案 (Vue3 + wangEditor)
// 在wangEditor中扩展Word粘贴功能const{Boot}=window.wangEditor Boot.registerModule(require('./word-paste-module'))// word-paste-module.jsexportdefault{menus:['wordPaste'],init(){consteditor=this.editor editor.config.uploadImgShowBase64=true// 先base64处理，后台上传// 添加Word粘贴按钮editor.menus.extend('wordPaste',{title:'Word粘贴',icon:'📋',click(){this.pasteFromWord()},pasteFromWord(){// 魔法开始...constpasteArea=document.createElement('textarea')pasteArea.style.position='fixed'document.body.appendChild(pasteArea)pasteArea.focus()// 监听粘贴事件pasteArea.addEventListener('paste',(e)=>{constitems=(e.clipboardData||e.originalEvent.clipboardData).itemslethtml=''for(leti=0;i<items.length;i++){if(items[i].type==='text/html'){html=e.clipboardData.getData('text/html')break}}if(html){// 调用清洁工函数清理Word垃圾样式constcleanHtml=this.cleanWordHtml(html)editor.cmd.do('insertHTML',cleanHtml)}document.body.removeChild(pasteArea)},{once:true})// 模拟粘贴操作document.execCommand('paste')},cleanWordHtml(html){// 这里需要写一个完整的Word HTML净化器// 篇幅限制，简单示例：returnhtml.replace(/<\!$$if !vml$$>.+?/gmi,'')// 干掉VML.replace(/<\/o:p>/g,'')// 干掉Office标签// ...还有10086个正则等着写}})}}后端方案 (Java + Apache POI)
// Word文档导入控制器@RestController@RequestMapping("/api/upload")publicclassDocumentImportController{@AutowiredprivateAliyunOssServiceossService;@PostMapping("/word")publicResultimportWord(@RequestParam("file")MultipartFilefile){try{// 1. 保存临时文件FiletempFile=File.createTempFile("word_",".docx");file.transferTo(tempFile);// 2. 用Apache POI解析XWPFDocumentdoc=newXWPFDocument(newFileInputStream(tempFile));StringhtmlContent=convertDocxToHtml(doc);// 3. 处理图片htmlContent=processImages(htmlContent,doc.getAllPackagePictures());// 4. 返回HTML内容returnResult.success(htmlContent);}catch(Exceptione){returnResult.error("Word导入失败: "+e.getMessage());}}privateStringconvertDocxToHtml(XWPFDocumentdoc){// 这里需要实现完整的Docx转HTML逻辑// 简单示例：StringBuilderhtml=newStringBuilder();for(IBodyElementelem:doc.getBodyElements()){if(eleminstanceofXWPFParagraph){html.append("").append(((XWPFParagraph)elem).getText()).append("");}elseif(eleminstanceofXWPFTable){html.append(convertTableToHtml((XWPFTable)elem));}// 还要处理页眉页脚、列表、样式等...}returnhtml.toString();}privateStringprocessImages(Stringhtml,Listpictures){// 处理图片上传到OSSfor(XWPFPictureDatapic:pictures){StringpicUrl=ossService.upload(pic.getData(),"images/"+UUID.randomUUID()+".png");html=html.replace("cid:"+pic.getPackagePart().getPartName().getName(),picUrl);}returnhtml;}}遇到的那些坑 🕳️
Word的"魔法"样式：微软工程师一定是哈利波特粉丝，各种
mso-开头的黑魔法样式让我怀疑人生VML绘图：2000年的技术居然还在用，解析这些``标签就像考古
公式处理：Latex转MathML？这活应该找数学系的来做！
Excel表格：客户给的表能绕地球三圈，解析完我的内存也绕地球三圈了
省钱大法 💰
预算680元？兄弟你这是要我用爱发电啊！不过咱福建人最会精打细算：
- 云存储：用阿里云OSS按量付费，1GB几分钱
- 前端插件：基于开源魔改，省下买商业授权的钱
- 后端解析：Apache POI免费，就是费头发
- 测试环境：用自己淘汰的笔记本当服务器（反正客户看不见）
加群福利 🎁
看到这里的都是真兄弟！加群223813913享受：
- 新人红包（1-99元，能不能拿到99看手气）
- 外包项目共享（大家一起秃）
- 技术交流（如何用最少代码实现最多功能）
- 提成计划（推荐客户拿20%，比写代码赚钱快）
最终效果 ✨
虽然过程像西天取经，但最终实现了：
- Word一键粘贴 ✔️
- 保留基本样式 ✔️
- 图片自动上传 ✔️
- 表格基本支持 ✔️
- 没超预算 ✔️（barely…）
- 还剩几根头发 ✔️（barely…）
各位看官如果需要完整代码…得加钱！或者加群223813913一起探讨如何用680元预算做出68000元的效果，福建人的智慧你值得拥有！
复制插件文件
安装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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片
下载示例
点击下载完整示例
