哪些网站用jsp,服务好的企业做网站,南京高端模板建站,设计好的网站推荐当Word一键粘贴遇上680元预算#xff1a;一个前端程序员的奇幻漂流
各位同行好#xff0c;我是北京某不知名前端码农老王#xff08;头发比Vue2升Vue3的迁移成本还高的那种#xff09;。最近接了个CMS企业官网项目#xff0c;客户要求在KindEditor里实现Office全家桶导入…当Word一键粘贴遇上680元预算一个前端程序员的奇幻漂流各位同行好我是北京某不知名前端码农老王头发比Vue2升Vue3的迁移成本还高的那种。最近接了个CMS企业官网项目客户要求在KindEditor里实现Office全家桶导入预算680块…客户原话“我看淘宝50块就能买个Office转换器”技术踩坑血泪史第一回合富文本编辑器的尊严之战// 尝试监听paste事件处理Word粘贴editor.addPasteHandler(function(html){// 期望完美保留样式的HTML// 现实公式变成乱码表格变成行为艺术console.log(html);// 输出这里是你的文档/* 3000行看不懂的Office样式 */});第二回合开源方案探秘试了这些方案mammoth.jsWord转HTML还行但表格和公式直接摆烂sheetjsExcel专业户看到Word文件就装死pdf.js渲染PDF可以想转HTML加钱第三回合后端API的玄学调用// 调用后端转换接口axios.post(/convert/office,formData).then(res{// 期望结构完美的HTML// 现实{code: 500, msg: 内存不足建议加钱升级服务器}}).catch(err{this.$message.error(转换失败错误码${err.response?.data?.code||预算不足});});乞丐版解决方案预算680元限定前端魔改方案Vue3插件版// office-paste-plugin.jsexportdefault{install(editor){// 添加土豪金导入按钮颜色越金功能越虚editor.addButton(office_import,{title:一键暴富导入,icon:,onclick:(){this.$confirm(您即将使用价值68000元的功能现价680元,温馨提示,{confirmButtonText:我不管我就要,cancelButtonText:加钱也行,type:warning}).then((){// 乞丐版实现constinputdocument.createElement(input);input.typefile;input.accept.docx,.xlsx,.pptx,.pdf;input.onchange(e){constfilee.target.files[0];if(file.size1024*100){this.$message.warning(文件太大建议加钱解锁);return;}this.$message.success(已为您开启30秒体验版);setTimeout((){editor.insertHtml(这里是您的文档部分样式可能丢失);},3000);};input.click();});}});// 低配版Word粘贴KindEditor.plugin(poorManPaste,function(K){this.addPasteHandler(function(html){// 把公式替换成表情包returnhtml.replace(//g, ).replace(/1024*1024){returnResult.error(文件超过1MB建议加钱解锁大文件支持);}try{String html;htmlfile.getOriginalFilename();html这里是您价值680元的文档转换结果;// 假装处理了不同文件类型if(file.getOriginalFilename().endsWith(.docx)){htmlWord文档基础文本已转换;}elseif(file.getOriginalFilename().endsWith(.xlsx)){htmlExcel预览需要SVIP;}html;returnResult.ok(html);}catch(Exception e){returnResult.error(转换失败建议加钱购买专业版);}}}专业版解决方案加钱可现实版技术栈推荐前端方案Word/PPT处理mammoth.js 自定义样式处理器Excel处理SheetJS handsontable 渲染PDF处理pdf.js 自定义解析器公式转换MathJax 3支持LaTeX转MathML后端方案// PHP示例因为预算低可能用PHPfunctionconvertOfficeToHtml($file){$html;$extpathinfo($file,PATHINFO_EXTENSION);switch(strtolower($ext)){casedocx:// 使用phpword库$phpWord\PhpOffice\PhpWord\IOFactory::load($file);$html$phpWord-getContent();// 理想情况break;casepdf:// 使用smalot/pdfparser$parsernew\Smalot\PdfParser\Parser();$pdf$parser-parseFile($file);$htmlnl2br($pdf-getText());// 低配版break;default:$html不支持的文件类型;}return$html;}良心报价单给客户看功能乞丐版(680元)小康版(6800元)土豪版(68000元)Word基础文本✓✓✓表格保留仅边框✓✓公式支持表情包代替基本显示完美渲染图片自动上传手动选择✓✓多终端适配❌基本适配完美适配致富热线QQ群223813913群里福利比我的代码还有想象力新人红包1-99元中奖概率≈在IE浏览器跑通Vue3推荐提成20%起跳上限680元封顶毕竟预算有限致富计算器推荐1单680元 × 20% 136元 10单 1360元/月 一年16320元 注需要先完成推荐100人加群成就才能提现想一起吐槽富文本编辑器的同行欢迎加群223813913群里真有人在讨论用JS解析Office文档虽然大部分时间在抢0.01元红包上传工具栏插件文件夹上传插件文件夹控件初始化在head中引入组件文件注意不要重复引入jquery如果您的页面已经引入了jquery这里就不要再引入jquery 1.4了。WordPaster For KindEditor-4.x # 初始化组件 WordPaster.getInstance({ui:{render:wdpst}//目标容器一般为div});设置快捷键将插件添加到工具栏并挂载KindEditor的CtrlV快捷键事件vareditor;KindEditor.ready(function(K){editorK.create(#content1,{items:[wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf,|],afterCreate:function(){WordPaster.getInstance().SetEditor(this);varselfthis;//自定义 Ctrl V 事件。KindEditor.ctrl(self.edit.doc,V,function(){WordPaster.getInstance().Paste();});}});});注意1.如果接口字段名称不是file请配置FileFieldName。点击查看教程2.如果接口返回JSON请配置ImageMatch点击查看教程3.如果接口返回的图片地址没有域名请配置ImageUrl点击查看教程整合效果效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片示例下载下载完整示例