核心内容摘要
【高清视频】介绍一个自动化测试辅助小工具 - 上下电测试适用于电脑冷启动的掉电盒
2023年X月X日 晴转多云开发日志今天又是和代码“斗智斗勇”的一天作为湖南某高校计算机专业的大二学生我最近在搞一个“CMS系统大改造”——目标是让Word里的图片一键转存到服务器还能在编辑器里保留文档样式连表格、字体、公式这些“细节控”都要照顾到。
更狠的是我还想支持Excel、PPT、PDF导入简直是在给自己挖“技术深坑”。
上午疯狂“白嫖”免费组件早上一睁眼我就打开了GitHub和CSDN开始“全网搜刮”免费组件。
我的需求很明确前端Vue2 KindEditor 4虽然老但老板自己要求用后端ASP.NET WebForm老古董但学校教的就是这个云存储阿里云OSS毕竟白嫖了学生优惠文档解析重点要能解析Word/Excel/PPT/PDF提取图片和样式。
结果我发现了几个“宝藏”Docx.js能解析Word文档但Excel和PPT得另找。
SheetJS处理Excel还行但PPT和PDF又得换库。
PDF.jsMozilla的开源库解析PDF不错但图片转存得自己写逻辑。
Mammoth.js专门提取Word样式但表格和图片处理有点鸡肋。
最搞笑的是我试了一个叫“OfficeToHTML”的组件结果它把Word转成HTML后表格全乱了字体大小也变了仿佛在告诉我“年轻人别做梦了样式保留是不可能的。
”气得我差点摔键盘但想到是租的电脑又默默放下了……下午和KindEditor“斗法”KindEditor 4是个老编辑器了文档少得可怜。
我想让它支持图片自动上传到OSS结果发现原生不支持拖拽上传得自己监听paste事件。
上传后得手动插入图片URL还得保留原始样式比如宽度、对齐方式。
最坑的是Word里的图片是base64编码的直接传会炸服务器得先转成Blob再上传。
于是我写了一段“魔改”代码// 监听粘贴事件过滤Word图片editor.on(paste,function(e){constclipboardDatae.clipboardData||window.clipboardData;constitemsclipboardData.items;for(leti0;iitems.length;i){if(items[i].type.indexOf(image)!-
{constblobitems[i].getAsFile();uploadToOSS(blob).then(url{editor.insertHtml();});}}});结果测试时发现图片上传成功了但样式全没了原来KindEditor会默认给图片加max-width:100%把Word里的原始宽度覆盖了。
于是我又改成了// 从Word的HTML里提取style属性constwordHtmlclipboardData.getData(text/html);constimgTagwordHtml.match(/]/g)[0];conststyleimgTag.match(/style([^])/);if(style){editor.insertHtml();}终于图片上传后样式保留了我差点感动哭结果发现表格还没处理……明天继续哭晚上和ASP.NET WebForm“相爱相杀”后端用ASP.NET WebForm接收前端传的Blob数据时发现Request.Files在WebForm里是HttpFileCollection但前端传的是FormData得用Request.InputStream手动解析。
阿里云OSS的SDK是.NET Core的WebForm得用旧版SDK配置起来像在解谜。
最后我写了一个“土味”上传接口// 接收Blob数据并上传OSS[HttpPost]publicstringUploadImage(){StreamstreamRequest.InputStream;byte[]buffernewbyte[stream.Length];stream.Read(buffer,0,buffer.Length);// 阿里云OSS配置省略N行代码OSSClientclientnewOSSClient(endpoint,accessKeyId,accessKeySecret);PutObjectRequestrequestnewPutObjectRequest(bucketName,objectKey,newMemoryStream(buffer));client.PutObject(request);return$https://{bucketName}.{endpoint}/{objectKey};}测试时前端传了个10MB的PPT图片结果WebForm默认限制请求大小为4MB直接报错400。
于是我又去改web.config终于图片上传成功了但Excel和PPT的样式保留还没搞定……明天继续肝结尾加入“同行交流群”今天在CSDN看到有人发了个QQ群“CMS开发交流群群号223813913”说是能讨论Word转存、样式保留这些“高难度操作”。
我火速加入结果发现群里全是大佬有人用PythonDjango搞有人用JavaSpring Boot就我一个用ASP.NET WebForm的“古董选手”。
不过大家都很热情还分享了几个免费组件的链接比如Apache POI处理Office文档Java版但可以借鉴思路Spire.Doc商业库但有免费版功能受限iTextSharp处理PDF老牌库但文档难懂明天继续测试这些组件争取把Excel和PPT的样式保留也搞定如果成功了我一定来群里发红包虽然穷但气势不能输今日
总结进度Word图片上传样式保留部分成功坑点KindEditor样式覆盖、WebForm请求大小限制心情像在玩“技术版密室逃脱”但解谜成功后超爽PS如果有人也在搞类似项目欢迎加群交流群号223813913暗号“Word图片转存”。
说不定还能找到队友一起肝毕业设计呢上传工具栏插件文件夹上传插件文件夹控件初始化在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转换成图片上传到服务器中。
上传网络图片示例下载下载完整示例