农业信息化项目用WANGEDITOR导入Excel表格时图片会失真吗？

《一个独立开发者的Word粘贴大作战从抓狂到真香的技术冒险》——上海野生程序员的血泪实录第一章当甲方爸爸说要能粘贴Word图片时我的表情是这样的事情是这样的我独自开发了一个网站前端Vue2 wangEditor后端PHP MySQL服务器在阿里云结果甲方突然提出灵魂三连“用户要能直接从Word粘贴内容图片自动上传到服务器”“还要支持导入Word/Excel/PPT/PDF图片不能丢样式不能变”“对了后端得用对象存储阿里云/腾讯云/华为云…都行”我当时的内心OS“您直接说想要个Office 365得了”但作为独立开发者我只能默默打开GitHub开始我的技术考古之旅…第二章前端篇——wangEditor的粘贴魔法1. 拦截粘贴事件和Word的脏HTML斗智斗勇wangEditor默认粘贴Word内容会带一堆、等Office专属标签直接显示会乱码。我的解决方案// 在wangEditor配置中拦截paste事件editor.config.pasteFilterStylefalse;// 先允许样式editor.config.pasteIgnoreImgfalse;// 不忽略图片editor.config.customPaste(editor,html){// 1. 清理Office冗余标签letcleanHtmlhtml.replace(/\/o:p/g,).replace(//g, );// 2. 提取图片并上传后面细说returncleanHtml;};2. 图片自动上传从Base64到Blob的逆袭Word粘贴的图片默认是data:image/png;base64格式直接存数据库会炸Base64比二进制大33%。我的操作// 提取Base64图片并上传constextractImages(html){constdivdocument.createElement(div);div.innerHTMLhtml;constimgsdiv.querySelectorAll(img[src^data:image]);imgs.forEach(img{constbase64img.src.split(,)[1];constblobbase64ToBlob(base64);// 自定义转换函数// 调用后端API上传fetch(/api/upload,{method:POST,body:blob}).then(resres.json()).then(data{img.srcdata.url;// 替换为服务器URL});});returndiv.innerHTML;};效果用户粘贴Word后图片自动上传到服务器编辑器里显示的是可访问的URL样式字体、颜色完美保留第三章后端篇——PHP和对象存储的相爱相杀1. 接收图片从Blob到文件存储PHP处理上传的Blob需要点技巧// api/upload.php$inputfile_get_contents(php://input);$filenameuniqid()..png;file_put_contents(/tmp/.$filename,$input);// 调用对象存储SDK以阿里云OSS为例require_oncealiyun-oss-sdk.php;$ossClientnewOSS\OssClient(key,secret,endpoint);$ossClient-putObject(your-bucket,uploads/.$filename,fopen(/tmp/.$filename,r));echojson_encode([urlhttps://your-bucket.oss-cn-shanghai.aliyuncs.com/uploads/.$filename]);2. 文档导入Word/Excel/PPT/PDF全制霸这里我用了UnoconvLibreOffice的命令行工具转换文档为HTML// 导入Word/Excel/PPTfunctionconvertToHtml($filePath){$outputPath/tmp/.basename($filePath,.docx)..html;exec(unoconv -f html -o /tmp$filePath);returnfile_get_contents($outputPath);}// 导入PDF用pdf2htmlEXfunctionconvertPdfToHtml($filePath){$outputPath/tmp/.basename($filePath,.pdf)..html;exec(pdf2htmlEX --zoom 1.3$filePath$outputPath);returnfile_get_contents($outputPath);}坑点Unoconv需要安装LibreOffice服务器上配置略麻烦PDF转换后的HTML可能很乱需要用CSS重置样式第四章同行交流——QQ群里的技术互救在开发过程中我加了几个技术群比如QQ群223813913发现大家的问题出奇地一致A君“Word粘贴的图片怎么去掉EXIF信息”B妹“Excel导入后表格线全没了怎么办”C大佬“推荐用Mammoth.js处理Word比Unoconv轻量”我的感悟独立开发不孤单群里问一句能省半天调试时间最终成果甲方爸爸满意我也能睡个好觉了现在网站支持✅Word粘贴内容图片自动上传样式保留✅多文档导入Word/Excel/PPT/PDF一键转换✅对象存储图片存阿里云OSS速度飞起技术栈总结前端Vue2 wangEditor粘贴拦截图片上传后端PHP文件处理对象存储SDK工具Unoconv文档转换 pdf2htmlEXPDF处理最后广告如果你也在搞富文本编辑器Word粘贴欢迎加入QQ群223813913一起吐槽技术难题分享解决方案完——上海野生程序员·老张复制插件文件安装jquerynpm install jquery导入组件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化组件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-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(){vareditornewE(#editor);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});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?id82170058de824b5c86e2e666e5be319czyOffice.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.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length0;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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例