企业官网建设流程全解析

站群源码,saas WordPress,建设工程学部研究生培养网站,做公司网站 国外系统山西老码农的680元Office全家桶改造计划 各位老铁好啊#xff01;我是山西那个天天跟Word文档干仗的前端码农#xff0c;最近接了个企业官网的外包活儿#xff0c;客户突然要加个Office全家桶功能…预算还只有680块#xff01;这不得…山西老码农的680元Office全家桶改造计划各位老铁好啊我是山西那个天天跟Word文档干仗的前端码农最近接了个企业官网的外包活儿客户突然要加个Office全家桶功能…预算还只有680块这不得好好跟大家唠唠我是怎么用最少的钱办最大的事儿~需求拆解客户要的到底是啥客户其实就是想要个傻瓜式操作大妈也能一键粘贴Word不丢样式领导们年纪大了搞不来复杂操作能导入各种Office文档连PPT动画都要保留你敢信公式要高清显示从手机到小程序都不能糊最好能直接复制微信公众号文章客户说他们经常这么干技术选型680块怎么花最值前端方案继续用xhEditor老古董了改不动改不动换UEditor百度都不维护了放弃TinyMCE开源版插件大法最终选择买了个学生优惠插件包花了99自己魔改了下公式处理头发掉了不少后端方案手撸了个Node.js中间层反正客户服务器能跑图片处理用sharp库比ImageMagick轻量公式转换用mathjax-node免费的真香代码实战能跑就行前端部分Vue3版// 在setup函数里搞事情import{onMounted}fromvueimporttinymcefromtinymce/tinymceimporttinymce/icons/defaultimporttinymce/themes/silverimporttinymce/plugins/pasteimporttinymce/plugins/imageexportdefault{setup(){onMounted((){tinymce.init({selector:#editor,plugins:paste image wordcount,toolbar:pasteword importoffice,height:800,// 自定义按钮setup:(editor){editor.ui.registry.addButton(pasteword,{icon:paste,tooltip:粘贴Word内容,onAction:(){navigator.clipboard.readText().then(text{// 这里调用咱的后端API处理Word内容fetch(/api/process-word,{method:POST,body:JSON.stringify({content:text})}).then(resres.text()).then(html{editor.insertContent(html)})})}})// 文件导入按钮editor.ui.registry.addButton(importoffice,{text:导入Office,onAction:(){// 偷偷创建一个文件inputconstinputdocument.createElement(input)input.typefileinput.accept.docx,.xlsx,.pptx,.pdfinput.onchange(e){constfilee.target.files[0]constformDatanewFormData()formData.append(file,file)fetch(/api/import-office,{method:POST,body:formData}).then(resres.text()).then(html{editor.insertContent(html)})}input.click()}})}})})}}后端部分Node.js版constexpressrequire(express)constmulterrequire(multer)constmammothrequire(mammoth)constsharprequire(sharp)constfsrequire(fs)constappexpress()constuploadmulter({dest:uploads/})// 处理Word粘贴app.post(/api/process-word,(req,res){const{content}req.body// 这里其实应该用mammoth处理但演示就简单点了consthtmlcontent.replace(/]srcdata:image[^][^]*/g,match{// 提取base64图片constbase64Datamatch.match(/src([^])/)[1]constbufferBuffer.from(base64Data.split(,)[1],base64)// 用sharp处理图片并保存constfilenameimages/${Date.now()}.jpgsharp(buffer).resize(800)// 限制宽度.toFile(public/${filename})return})res.send(html)})// 处理Office文件导入app.post(/api/import-office,upload.single(file),async(req,res){const{path,originalname}req.filetry{lethtmlif(originalname.endsWith(.docx)){constresultawaitmammoth.convertToHtml({path})htmlresult.value}else{// 其他格式简单返回文件名实际应该用对应的库处理html已上传文件:${originalname}}// 处理图片上传同上htmlhtml.replace(/]src[^][^]*/g,match{// 图片处理逻辑...})res.send(html)}finally{fs.unlinkSync(path)// 删除临时文件}})app.listen(3000)踩坑大全都是泪啊公式显示问题最终用了这个方案// 前端公式渲染document.querySelectorAll(.math).forEach(el{MathJax.typesetPromise([el]).catch(err{console.error(公式渲染失败:,err)})})PPT动画丢失老老实实跟客户说做不到加钱也做不到客户最后妥协了微信公众号特殊样式加了这段黑魔法// 处理微信公众号的特殊标签htmlhtml.replace(/]*\/mpchecktext/g,)680元预算分配TinyMCE基础插件包学生优惠99元阿里云OSS存储包最便宜那档60元/年腾讯云函数计算跑公式转换0元免费额度够用剩下521元…当然是买咖啡熬夜改bug啊老码农的私房话看到你们群里那个推广提成说实话我有点心动…但我更心疼那些被忽悠的新人。这年头什么轻松年入40万都是鬼扯我接这个680元的项目前后改了8版需求最后实际收入也就够交一个月房租。但是这个案例成了我接下一个2万块项目的敲门砖——客户看到我能在这么低的预算下实现复杂功能当场就签了合同。所以啊与其天天群里发广告不如静下心来把GitHub仓库搞漂亮点在掘金写两篇技术文章把做过的项目好好整理成案例小声说那个QQ群我还是加了领了3块钱红包就跑路了…最后的最后完整项目我开源在了GitHub其实并没有客户不让但核心代码都在上面了自己拿去魔改吧P.S.那个公式转换的坑我填了3天3夜…你们要是遇到类似问题记住一定要用mathjax-node别像我一样头铁非要自己写将插件目录复制到项目中引入插件文件定义插件图标初始化插件在工具栏中添加插件按钮效果编辑器导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例