核心内容摘要
《3对3三人体检》：告别盲目，拥抱健康，开启你的专属健康规划！
推了推黑框眼镜手指在键盘上噼里啪啦敲击各位老铁咱北京程序员又来唠嗑了最近接了个CMS官网的活儿客户爸爸要求在KindEditor里整点花活——要能直接把Word/Excel/PPT/PDF里的内容连锅端到编辑器里连公式和形状都不能丢这哪是需求啊这分明是要让咱把Office全家桶塞进浏览器里啊前端骚操作Vue3 KindEditor插件// src/plugins/OfficeImporter.jsexportdefault{init(editor){editor.addButton(officeImport,{title:一键导入Office文档,icon:icon-office,onclick:(){constinputdocument.createElement(input);input.typefile;input.accept.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf;input.onchangeasync(e){constfilee.target.files[0];if(!file)return;// 调用后端API处理文件constformDatanewFormData();formData.append(file,file);try{constresawaitfetch(/api/office/import,{method:POST,body:formData});consthtmlawaitres.text();editor.insertHtml(html);// 插入处理后的HTML}catch(err){alert(导入失败err.message);}};input.click();}});}};// main.js 注册插件importOfficeImporterfrom./plugins/OfficeImporter;KindEditor.plugin(officeImport,OfficeImporter);后端神操作PHP处理Office转HTML// api/office/import.phpgetContent();}functionhandleExcel($filePath){$spreadsheetSpreadsheetIO::load($filePath);$writernew\PhpOffice\PhpSpreadsheet\Writer\Html($spreadsheet);return$writer-generateHtmlHeader(false).$writer-generateSheetData();}functionhandlePPT($filePath){$phpPresentationPresentationIO::load($filePath);$html;foreach($phpPresentation-getAllSlides()as$slide){$html.;foreach($slide-getShapeCollection()as$shape){if(method_exists($shape,getRichTextElements)){$html..htmlspecialchars($shape-getRichTextElements()[0]-getText()).;}}$html.;}return$html;}functionuploadImagesToOSS($html,$tempDir){// 正则匹配所有img标签的srcpreg_match_all(/]src([^])[^]*/i,$html,$matches);foreach($matches[1]as$i$src){if(strpos($src,data:image)
{// 处理base64图片$imageDatasubstr($src,strpos($src,,)
;$imageNameuniqid()..png;$ossPathuploads/.date(Ymd)./.$imageName;$ossClient-putObject(your-bucket,$ossPath,base64_decode($imageData));$htmlstr_replace($src,https://your-bucket.oss-cn-beijing.aliyuncs.com/.$ossPath,$html);}elseif(file_exists($tempDir./.basename($src))){// 处理本地临时文件$imageNameuniqid()...pathinfo($src,PATHINFO_EXTENSION);$ossPathuploads/.date(Ymd)./.$imageName;$ossClient-putObject(your-bucket,$ossPath,file_get_contents($tempDir./.basename($src)));$htmlstr_replace($src,https://your-bucket.oss-cn-beijing.aliyuncs.com/.$ossPath,$html);}}return$html;}// 主逻辑$tempDirsys_get_temp_dir();$filePath$tempDir./.uniqid()...pathinfo($_FILES[file][name],PATHINFO_EXTENSION);move_uploaded_file($_FILES[file][tmp_name],$filePath);$html;switch(pathinfo($_FILES[file][name],PATHINFO_EXTENSION)){casedoc:casedocx:$htmlhandleWord($filePath);break;casexls:casexlsx:$htmlhandleExcel($filePath);break;caseppt:casepptx:$htmlhandlePPT($filePath);break;casepdf:// 这里可以用pdftotext或imagick处理PDF$htmlPDF导入功能需额外配置;break;}// 处理图片上传到OSS$htmluploadImagesToOSS($html,$tempDir);// 清理临时文件unlink($filePath);echo$html;数据库设计就这-- 根本不需要改表结构-- 所有图片都存OSSHTML直接塞进content字段ALTERTABLEnewsMODIFYcontentLONGTEXTCOMMENT存储带Office样式的HTML;群内赚钱秘籍正经脸QQ群223813913新人进群领红包推荐客户拿20%提成代理机制你负责拉客户我负责写代码分成自动到账技术优势独家支持MathType/Latex公式转MathML完美解析emz/wmz矢量图公众号内容一键搬运成本计算开发成本0元开源组件拼装服务器成本阿里云ECS OSS客户自付你的时间成本复制粘贴这段代码的时间突然正经说真的这需求我调研了两周发现市面上要么贵得离谱要么功能阉割。
咱们这个方案前端Vue3 KindEditor插件1天搞定后端PHPOffice全家桶3天搞定部署宝塔面板一键安装半天搞定最关键的是——客户根本分不清你是自己开发的还是集成的所以兄弟们赶紧加群这波红利能吃三年突然弹出消息提示“您有新的代理注册申请预计提成¥
4
00” 哎写代码哪有收提成香啊~上传工具栏插件文件夹上传插件文件夹控件初始化在head中引入组件文件注意不要重复引入jquery如果您的页面已经引入了jquery这里就不要再引入jquery
4了。
WordPaster For KindEditor-
x # 初始化组件 WordPaster.getInstance({ui:{render:wdpst}//目标容器一般为div});设置快捷键将插件添加到工具栏并挂载KindEditor的CtrlV快捷键事件注意
如果接口字段名称不是file请配置FileFieldName。
点击查看教程
如果接口返回JSON请配置ImageMatch点击查看教程
如果接口返回的图片地址没有域名请配置ImageUrl点击查看教程整合效果效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片示例下载下载完整示例