☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
wangEditor pdf导入识别图片和图表元素
2026/10/19 11:30:34 网站建设 项目流程

Word一键转存CMS升级方案

项目背景分析

作为一名北京软件工程专业大三学生，我正在开发一个CMS新闻管理系统，目前需要实现Word内容一键转存功能。

技术方案选型

前端方案 - wangEditor 5插件

// Word粘贴处理插件代码import{Boot}from'@wangeditor/editor'import{DomEditor}from'@wangeditor/editor'functionwithWordPaste(editor){const{insertData}=editorconstnewEditor=editor newEditor.insertData=(data)=>{consthtml=data.getData('text/html')if(html){// 处理Word粘贴内容handleWordPaste(html).then(processedHtml=>{constfragment=DomEditor.genFragmentFromHtml(newEditor,processedHtml)newEditor.deleteFragment()newEditor.insertFragment(fragment)})return}insertData(data)}returnnewEditor}consthandleWordPaste=async(html)=>{// 1. 提取图片并上传到OSSconstimages=extractImagesFromHtml(html)constuploadPromises=images.map(img=>uploadToOSS(img))constuploadedUrls=awaitPromise.all(uploadPromises)// 2. 替换图片URLletprocessedHtml=replaceImageUrls(html,uploadedUrls)// 3. 处理公式转换processedHtml=convertLatexToMathML(processedHtml)returnprocessedHtml}// 注册插件Boot.registerPlugin(withWordPaste)

后端PHP处理代码

uploadFile(getenv('OSS_BUCKET'),'images/'.uniqid().'.'.pathinfo($file['name'],PATHINFO_EXTENSION),$file['tmp_name']);echojson_encode(['url'=>$result['info']['url']]);}catch(OssException$e){http_response_code(500);echojson_encode(['error'=>$e->getMessage()]);}}// Word内容处理接口functionprocessWordContent(){$content=$_POST['content'];// 1. 处理图片$content=preg_replace_callback('/]+src="([^">]+)"[^>]*>/',function($matches){$imageUrl=$matches[1];if(strpos($imageUrl,'data:image')===0){$uploadedUrl=uploadBase64Image($imageUrl);returnstr_replace($matches[1],$uploadedUrl,$matches[0]);}return$matches[0];},$content);// 2. 处理公式$content=convertLatexToMathML($content);echo$content;}?>

预算99元能买什么？

"学生党预算99元"这个问题让我想起了食堂9.9元的特价套餐 - 能吃饱但别指望有大鱼大肉。在这个价格区间，我推荐以下方案：

  1. Mammoth.js(免费)

    • 专业Word转HTML工具
    • 保留表格、列表等基本样式
    • 但不支持公式转换

  2. 付费插件组合(99元极限操作)

    • 用60元购买wangEditor的商业授权
    • 剩下39元买杯奶茶贿赂学长帮你写公式转换代码

公式显示解决方案

多终端公式显示方案

// Latex转MathML转换函数functionconvertLatexToMathML(latex){// 使用MathJax或KaTeX进行转换if(typeofkatex!=='undefined'){returnkatex.renderToString(latex,{displayMode:true,output:'mathml'});}// 后备方案：使用服务器端转换returnfetch('/api/convert-latex',{method:'POST',body:JSON.stringify({latex}),headers:{'Content-Type':'application/json'}}).then(res=>res.text());}

文件导入全攻略

“听说你想一键导入Word/Excel/PPT/PDF？这感觉就像想把整个食堂菜单一次性塞进饭卡里…”

// 文件导入处理functionhandleFileImport($file){$ext=pathinfo($file['name'],PATHINFO_EXTENSION);switch(strtolower($ext)){case'docx':returnconvertWordToHtml($file);case'xlsx':returnconvertExcelToHtml($file);case'pptx':returnconvertPptToHtml($file);case'pdf':returnconvertPdfToHtml($file);default:thrownewException('不支持的格式');}}functionconvertWordToHtml($file){// 使用PHPWord或Mammoth.js转换// 记得处理图片上传}

学生党生存建议

  1. 找工作技巧：

    • 把CMS项目包装成"亿级流量内容管理系统"
    • 将Word导入功能吹成"智能文档解析引擎"
    • 记住：面试官不懂=高科技

  2. 开源替代方案：

    • 试试OnlyOffice社区版(免费)
    • 或者用LibreOffice + 自己写的转换脚本

  3. 终极白嫖技巧：

    • GitHub学生包申请各种免费资源
    • 用阿里云学生机做服务器(9.9元/月)
    • 记住：学生身份是我们最大的资本

项目外包群真相

"听说你想建外包群？让我猜猜，最后会变成：

  • 50%的群成员在发’早安，码农们’
  • 30%的在发’求大神帮忙’
  • 19%的在潜水
  • 剩下1%的你真的在接单"

最后的建议

  1. 技术路线：

    • 先用Mammoth.js实现基础功能
    • 公式转换用MathJax客户端渲染
    • 等找到工作再用工资买商业组件

  2. 职业发展：

    • 把这个项目做成你的毕业设计
    • 加入简历重点项目
    • 面试时大谈"文档处理的技术挑战"

记住，作为学生开发者，我们的优势不是预算，而是可以理直气壮地说"这个功能我通宵就能搞定"(然后真的通宵)。祝你项目顺利，找到好工作！

复制插件文件


安装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转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片

下载示例

点击下载完整示例

标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询