企业官网建设流程全解析

做网站公司在哪,是不是该填写完整,安康微平台,个人网页设计作品模板简单抑郁症#x1f4dd; Word一键转存CMS升级手记 #x1f680; 项目背景 大家好#xff0c;我是江西某高校计算机专业大三的代码狂魔#xff0c;正在给我的CMS新闻管理系统做一次整容手术——添加Word一键转存功能#xff01;每次看到编辑部的妹子们手动… Word一键转存CMS升级手记 项目背景大家好我是江西某高校计算机专业大三的代码狂魔正在给我的CMS新闻管理系统做一次整容手术——添加Word一键转存功能每次看到编辑部的妹子们手动复制Word内容到后台图片还要一张张上传我就心疼主要是心疼她们的加班费都拿去喝奶茶了️ 技术调研需求拆解前端在wangEditor工具栏添加导入按钮功能支持Word/Excel/PPT/PDF → 保留格式 → 图片自动上传兼容Win Mac双平台预算99元毕竟学生党得留着钱买泡面方案探索方案1: mammoth.js (纯前端方案)// 测试代码片段importmammothfrommammoth;mammoth.extractRawText({arrayBuffer:fileArrayBuffer}).then(function(result){console.log(result.value);// 纯文本内容}).done();✔️ 优点免费、轻量❌ 缺点只能提取文本丢失格式和图片方案2: docx-parser (收费) 价格$199 → 超预算PASS方案3: 阿里云OSS官方SDK phpWord// PHP后端处理逻辑usePhpOffice\PhpWord\IOFactory;$phpWordIOFactory::load($tempFilePath);$writerIOFactory::createWriter($phpWord,HTML);$writer-save(converted.html);✔️ 优点格式保留较好❌ 缺点PPT/PDF支持有限 最终方案wangEditor paste-extension 自定义处理前端实现 (Vue2)import E from wangeditor import wangeditor/release/wangEditor.min.css export default { data() { return { editor: null } }, mounted() { this.initEditor() }, methods: { initEditor() { this.editor new E(this.$refs.editor) // 自定义菜单 this.editor.config.menus [ head, bold, italic, underline, strikeThrough, foreColor, backColor, link, list, justify, quote, table, code, undo, redo, importWord // 自定义按钮 ] // 注册自定义按钮 this.editor.config.customAlert (s) { console.log(s) } this.editor.config.customMenu { importWord: { text: 导入Office, className: icon-import-word, callback: () { document.getElementById(word-upload).click() } } } this.editor.create() }, async handleFileUpload(e) { const file e.target.files[0] if (!file) return try { const formData new FormData() formData.append(file, file) const res await this.$http.post(/api/office/upload, formData, { headers: { Content-Type: multipart/form-data } }) this.editor.txt.html(res.data.htmlContent) } catch (error) { console.error(文件上传失败:, error) } } } }后端处理 (PHP)ossClientnewOSS\OssClient(getenv(OSS_ACCESS_KEY_ID),getenv(OSS_ACCESS_KEY_SECRET),getenv(OSS_ENDPOINT));$this-bucketNamegetenv(OSS_BUCKET);}publicfunctionhandleUpload($file){$fileExtstrtolower(pathinfo($file[name],PATHINFO_EXTENSION));$tempPath$file[tmp_name];switch($fileExt){casedoc:casedocx:return$this-processWord($tempPath);casexls:casexlsx:return$this-processExcel($tempPath);caseppt:casepptx:return$this-processPpt($tempPath);casepdf:return$this-processPdf($tempPath);default:thrownewException(不支持的格式:$fileExt);}}privatefunctionprocessWord($filePath){$phpWord\PhpOffice\PhpWord\IOFactory::load($filePath);$htmlWriternew\PhpOffice\PhpWord\Writer\HTML($phpWord);// 处理图片$mediaElements$phpWord-getMediaElements();foreach($mediaElementsas$element){$imagePath$this-uploadImageToOSS($element[source],$element[imageExtension]);// 替换HTML中的图片路径$htmlWriter-replaceImagePath($element[mediaIndex],$imagePath);}$htmlContent$htmlWriter-getContent();return[htmlContent$htmlContent];}privatefunctionuploadImageToOSS($binaryData,$extension){$filenameuploads/.uniqid()...$extension;$this-ossClient-putObject($this-bucketName,$filename,$binaryData);return$this-ossClient-generatePresignedUrl($this-bucketName,$filename,3600);}// 其他格式处理方法类似...}? 开发日志Day1: 掉坑记尝试用纯前端方案 → 图片处理被CORS拦路抢劫试用phpWord → 发现PPT支持是个半成品喝掉三罐红牛后决定组合拳出击Day3: 突破性进展发现阿里云OSS有文件处理服务每月免费额度够用结合wangEditor的paste插件魔改成功成功保留表格样式(虽然颜色偶尔跑偏) 技术要点总结文件处理流程前端上传 → 后端识别格式 → 调用对应解析器 → 提取内容图片 → 图片上传OSS → 生成HTML → 返回编辑器成本控制技巧使用OSS免费额度用phpWordphpExcelphpPowerPoint组合替代商业库图片延迟加载减少流量消耗兼容性hack// 处理Mac系统差异constisMacnavigator.platform.toUpperCase().indexOf(MAC)0;if(isMac){// 调整某些API调用方式} 推荐资源PHPOffice官方文档wangEditor扩展开发指南阿里云OSS PHP SDK示例 结语这个项目让我深刻体会到——“程序员的时间都去哪了全花在找免费替代方案上了” 欢迎加入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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例