核心内容摘要
一性一情一义：人生最动人的底色
新疆Java程序员のCMS文档神器680元搞定版作为刚接完国企CMS项目的Java老炮儿我太懂你们要的开箱即用甲方爸爸满意的解决方案了今天就把压箱底的Word/PPT/Excel/PDF全能导入插件掏出来预算680元含奶茶钱保证让你在群里被夸技术大佬~
方案亮点新疆程序员の实在话开箱即用解压即插UEditor工具栏秒变文档神器按钮全格式兼容Word/Excel/PPT/PDF/公众号内容全覆盖公式高清Latex自动转MathML手机/平板/小程序都能高清显示国产化适配支持阿里云OSS私有云/混合云无缝切换预算友好680元买断源码终身免费升级比奶茶还划算
前端插件UEditor魔改版
插件目录结构/ueditor/plugins/doc_magic/ ├─ dialog.html # 多功能操作面板 ├─ doc_magic.js # 核心插件逻辑 └─ style.css # 样式文件
核心代码doc_magic.js// 注册UEditor插件Vue3兼容版UE.registerUI(doc_magic,function(editor,uiName){// 创建万能按钮用了新疆棉田绿配色constbtnnewUE.ui.Button({name:uiName,title:文档神器粘贴/导入,cssRules:background: #228B22; color: white;,onclick:()showMagicDialog(editor)});// 显示多功能弹窗Vue3适配functionshowMagicDialog(editor){constdialognewUE.ui.Dialog({iframeUrl:${editor.options.serverUrl}/plugins/doc_magic/dialog.html,editor:editor,title:文档导入神器,width:900,height:650,buttons:[{className:edui-okbutton,label:开始魔法,onclick:(){constcontentwindow.magicContent;editor.execCommand(insertHtml,content);dialog.close();}}]});dialog.render();dialog.open();}returnbtn;});
操作面板dialog.html文档导入神器 粘贴Word 导入文档 公众号 提取内容 抓取内容 const { createApp } Vue; createApp({ data() { return { activeTab: paste, pasteContent: , pastePreview: , wechatUrl: , wechatPreview: , filePreview: }; }, methods: { async processPaste() { // 调用后端处理粘贴内容 const res await fetch(/api/doc/process-paste, { method: POST, headers: {Content-Type: application/json}, body: JSON.stringify({ content: this.pasteContent }) }); const data await res.json(); this.pastePreview data.content; }, async handleFileUpload(e) { const file e.target.files[0]; const formData new FormData(); formData.append(file, file); // 调用后端上传文件 const res await fetch(/api/doc/upload-file, { method: POST, body: formData }); const data await res.json(); this.filePreview data.content; }, async fetchWechatContent() { // 调用后端抓取公众号内容 const res await fetch(/api/doc/fetch-wechat, { method: POST, headers: {Content-Type: application/json}, body: JSON.stringify({ url: this.wechatUrl }) }); const data await res.json(); this.wechatPreview data.content; } } }).mount(#app);
后端Java实现JSP兼容版
OSS配置工具类OssUtil.java// 用于阿里云OSS上传从环境变量获取配置安全publicclassOssUtil{privatestaticfinalStringENDPOINTSystem.getenv(OSS_ENDPOINT);privatestaticfinalStringACCESS_KEYSystem.getenv(OSS_ACCESS_KEY);privatestaticfinalStringSECRETSystem.getenv(OSS_SECRET);privatestaticfinalStringBUCKETSystem.getenv(OSS_BUCKET);privatestaticOSSClientossClient;static{ossClientnewOSSClientBuilder().build(ENDPOINT,ACCESS_KEY,SECRET);}// 上传文件到OSSpublicstaticStringuploadToOSS(StringfilePath,StringfileName)throwsException{StringobjectKeydocs/UUID.randomUUID().fileName.split(\\.)[1];ossClient.putObject(BUCKET,objectKey,newFile(filePath));returnhttps://BUCKET.ENDPOINT/objectKey;}}
文档处理核心类DocProcessor.java// 使用Apache POIPDFBox处理文档开源库无成本publicclassDocProcessor{// 处理粘贴的Word内容含图片publicStringprocessPastedWord(Stringhtml)throwsException{//
清理Word特有标签StringcleanHtmlcleanWordTags(html);//
提取并上传图片cleanHtmluploadImages(cleanHtml);//
转换Latex公式为MathMLcleanHtmlconvertLatexToMathML(cleanHtml);returncleanHtml;}// 解析Word文档.docxpublicStringparseWord(Filefile)throwsException{XWPFDocumentdocnewXWPFDocument(newFileInputStream(file));StringBuilderhtmlnewStringBuilder();// 处理段落for(XWPFParagraphpara:doc.getParagraphs()){html.append().append(parseParagraph(para)).append();}// 处理表格for(XWPFTabletable:doc.getTables()){html.append();for(XWPFTableRowrow:table.getRows()){html.append();for(XWPFTableCellcell:row.getTableCells()){html.append();}html.append();}html.append().append(parseCell(cell)).append();}html.append();returnhtml.toString();}// 辅助方法清理Word标签privateStringcleanWordTags(Stringhtml){returnhtml.replaceAll(.*?,).replaceAll(class\Mso[^]*\, ).replaceAll(,);}// 辅助方法上传图片privateStringuploadImages(Stringhtml)throwsException{PatternpatternPattern.compile(]src\data:image/(png|jpg);base64,(.*?)\[^]*);Matchermatcherpattern.matcher(html);StringBuffersbnewStringBuffer();while(matcher.find()){Stringbase64matcher.group(
;byte[]bytesBase
getDecoder().decode(base
;FiletempFileFile.createTempFile(img_,.png);Files.write(tempFile.toPath(),bytes);StringossUrlOssUtil.uploadToOSS(tempFile.getPath(),paste_img_System.currentTimeMillis().png);matcher.appendReplacement(sb,);tempFile.delete();}matcher.appendTail(sb);returnsb.toString();}// 辅助方法Latex转MathML调用MathJax APIprivateStringconvertLatexToMathML(Stringhtml){returnhtml.replaceAll(\\$(.*?)\\$,match-{Stringlatexmatch.group(
;try{// 调用MathJax API转换实际需替换为真实接口returnlatex;}catch(Exceptione){returnmatch.group(
;// 转换失败保留原格式}});}}
API接口控制器DocApi.jsp% page importcom.example.DocProcessor % % page importcom.example.OssUtil % % page importorg.apache.poi.xwpf.extractor.XWPFWordExtractor % % page importorg.apache.pdfbox.pdmodel.PDDocument % % page importjava.io.* % % response.setContentType(application/json;charsetUTF-
; String action request.getParameter(action); if (processPaste.equals(action)) { String content request.getParameter(content); DocProcessor processor new DocProcessor(); String result processor.processPastedWord(content); out.print({\content\:\ result \}); } else if (uploadFile.equals(action)) { Part filePart request.getPart(file); String fileName getFileName(filePart); File tempFile File.createTempFile(upload_, . fileName.split(\\.)[1]); filePart.write(tempFile.getPath()); DocProcessor processor new DocProcessor(); String html ; switch (fileName.split(\\.)[1].toLowerCase()) { case docx: html processor.parseWord(tempFile); break; case pdf: html parsePdf(tempFile); break; // 其他格式类似... } out.print({\content\:\ html \}); } else if (fetchWechat.equals(action)) { String url request.getParameter(url); String html fetchWechatContent(url); out.print({\content\:\ html \}); } % %! // 提取文件名工具方法 private String getFileName(Part part) { String contentDisp part.getHeader(content-disposition); for (String cd : contentDisp.split(;)) { if (cd.trim().startsWith(filename)) { return cd.substring(cd.indexOf()
.trim().replace(\, ); } } return unknown; } // 解析PDF简化版 private String parsePdf(File file) throws IOException { PDDocument doc PDDocument.load(file); StringBuilder html new StringBuilder(); // 实际需用PDFBox提取文本和图片此处简化 html.append(PDF内容预览); doc.close(); return html.toString(); } // 抓取公众号内容简化版 private String fetchWechatContent(String url) throws IOException { // 实际需用Jsoup解析HTML此处简化 return 公众号内容预览; } %
部署指南手残党友好版
环境准备服务器阿里云ECSCentOS 7JDK
8需安装tomcat、mysqlMavenyum install maven或手动安装OSS SDKmvn install com.aliyun.oss:aliyun-sdk-oss:
3.
1
1文档解析库mvn install org.apache.poi:poi-ooxml:
5.
3mvn install org.apache.pdfbox:pdfbox:
2.
0.
集成步骤将doc_magic插件目录放入UEditor的plugins目录在UEditor配置文件ueditor.config.js中添加按钮toolbars:[[doc_magic,bold,italic]// 放在最前面更显眼]配置OSS环境变量/etc/profileexportOSS_ENDPOINToss-cn-shenzhen.aliyuncs.comexportOSS_ACCESS_KEY你的AccessKeyIdexportOSS_SECRET你的AccessKeySecretexportOSS_BUCKET你的Bucket名称部署Tomcat并启动systemctl start tomcat
群组福利新疆程序员の搞钱指南加群223813913解锁以下隐藏福利新人红包1~99元随机现金手慢无接单特权优先获取企业CMS外包项目单价5k~2w提成暴击推荐客户拿20%提成2万订单直接拿4k内推通道国企/事业单位技术岗直推月薪10k群友真实反馈“上个月推荐了3个政府项目提成拿了
2w够在乌鲁木齐买部新手机了”
六、
注意事项避坑指南公式兼容复杂公式建议手动转MathML后再粘贴插件自动转换对超复杂公式支持有限图片压缩大图片建议先压缩再上传OSS流量费不便宜权限设置OSS Bucket需开放公共读权限否则前端无法显示图片测试环境本地测试时用mvn tomcat7:run启动方便调试最后送新疆程序员一句口头禅“这个需求包我身上” 有啥问题随时群里喊我24小时在线~复制插件目录引入插件文件UEditor
1.
4.
3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-
4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos
,asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。
ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。
ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。
或取消权限验证。
参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片下载示例点击下载完整示例