【开发日记Word图片一键转存大作战——从“秃头警告”到“真香现场”】2023年X月X日 周X 晴但我的头顶在下雨第一章需求诞生——甲方爸爸的“五彩斑斓黑”今天导师突然发来一个“小需求”给我的CMS系统后台新闻编辑器加个按钮支持Word/Excel/PPT/PDF粘贴导入图片自动上传到阿里云OSS还要保留文档样式字体、表格、公式、形状……连颜色都要一模一样。我盯着屏幕陷入了沉思这哪是需求这是让我用Vue2 KindEditor ASP.NET WebForm“复活”一个Office全家桶啊导师补刀“预算99元但可以请你喝冰阔落。”第二章开源寻宝——GitHub上的“海王”之旅打开GitHub我仿佛成了“海王”在茫茫开源库中疯狂撒网KindEditor插件官方文档说支持图片上传但Word粘贴不存在的。Mammoth.js能提取Word内容但样式全丢表格变“面条”公式变“乱码”。Pandoc功能强大但后端集成要装一堆依赖我的阿里云ECS服务器表示“你礼貌吗”WordPaster终于找到个支持KindEditor的插件但一看价格——99人民币/年我预算才9元人民币啊喂。就在我即将放弃时突然刷到一个**“WordToKindEditor”**的开源项目链接https://github.com/poor-dev/word-to-kindeditor作者自称“穷学生”功能简陋但免费“这不就是我吗”我激动得差点把奶茶泼到键盘上。第三章开发实录——和KindEditor的“相爱相杀”Day1前端改造——给KindEditor加按钮KindEditor的文档比我的课本还薄但凭借“玄学调试法”我成功在工具栏加了个“Word导入”按钮// config.jsKindEditor.ready(function(K){K.create(#editor,{items:[fontname,fontsize,|,forecolor,hilitecolor,|,wordpaste// 我的自定义按钮],afterCreate:function(){this.loadPlugin(wordpaste,function(){this.wordpaste.setUrl(/api/upload);// 指向后端接口});}});});问题按钮加上了但点击没反应。解决发现需要手动引入插件文件于是把项目里的wordpaste.js塞进KindEditor的plugins/文件夹世界终于安静了。Day2后端搏斗——ASP.NET WebForm的“上古魔法”前端传来的文件是multipart/form-data但ASP.NET WebForm的Request.Files死活读不到错误代码// UploadHandler.ashxpublicvoidProcessRequest(HttpContextcontext){HttpPostedFilefilecontext.Request.Files[file];// 返回nullcontext.Response.Write(文件呢);}解决方案原来WebForm需要加enctypemultipart/form-data但前端是AJAX上传得用FormData对象// 前端上传代码constformDatanewFormData();formData.append(file,file);// file是用户选择的Word文件fetch(/api/upload,{method:POST,body:formData});后端改用HttpContext.Current.Request.Files终于抓到文件了Day3阿里云OSS——从“403拒绝”到“真香”图片上传到OSS需要签名我照着官方SDK写了一段“加密魔法”// 生成OSS签名publicstringGetOssPolicy(){varpolicynewPolicy{ExpirationDateTime.Now.AddHours(1),ConditionsnewList{newCondition{Bucketyour-bucket},newCondition{Key${filename}}}};returnEncodePolicy(policy);// 返回Base64加密后的字符串}悲剧上传时返回403错误提示“签名不匹配”。原因OSS的SDK版本太旧和我的.NET Framework不兼容解决换用OSS .NET SDK for .NET Core虽然我的项目是WebForm但通过System.Runtime.Loader强行加载居然成功了。第四章最终成果——导师的“真香”现场经过3天熬夜系统终于能点击“Word导入”按钮粘贴或上传Word/Excel/PPT/PDF。图片自动上传到阿里云OSS返回URL插入编辑器。保留文档样式表格、字体、颜色、公式……连PPT里的“艺术字”都活过来了。导师测试后沉默了5秒然后说“这99元预算好像能给你买杯奶茶”我“不我要加两根烤肠”第五章开源互助——QQ群里的“技术扶贫”开发中遇到的问题都在QQ群223813913里解决了感谢群友的“远程手把手教学”前端大佬教我如何用Vue2监听KindEditor的粘贴事件。后端战神分享了ASP.NET WebForm处理大文件上传的“黑科技”。阿里云OSS专家直接甩给我一段可用的签名代码省了2小时调试时间。总结预算99元买了3杯奶茶2根烤肠开发全靠开源和群友。技术栈Vue2 KindEditor ASP.NET WebForm SQL Server 阿里云OSS。感悟“开源的力量能让一个穷学生用奶茶钱复活Office全家桶”P.S. 项目代码已上传GitHub欢迎白嫖https://github.com/your-name/cms-word-import—— 完 ——今日步数500步主要在宿舍和实验室之间“灵魂漂移”复制插件目录引入插件文件UEditor 1.4.3.3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-1.4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos1),asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例