一个网站是怎么建立的,wordpress任意文件删除,江苏盐城有做淘宝网站的吗,产品推广的句子国家能源集团项目新闻模块文档导入功能开发全记录 我是北京这家集团子公司的负责人#xff0c;近期我们成功承接了国家能源集团的一个关键项目。在项目推进过程中#xff0c;客户提出了在项目后台管理系统新闻模块增加重要功能的需求#xff0c;具体为支持 Word、Excel、PP…国家能源集团项目新闻模块文档导入功能开发全记录我是北京这家集团子公司的负责人近期我们成功承接了国家能源集团的一个关键项目。在项目推进过程中客户提出了在项目后台管理系统新闻模块增加重要功能的需求具体为支持 Word、Excel、PPT、PDF 文档导入实现 Word 内容一键粘贴且粘贴后图片自动上传至服务器同时编辑器要精准保留文档样式涵盖字体、字号、大小、颜色等细节。我们使用的编辑器是 wangEditor5前端基于 vue2 - cli 框架后端采用 SpringBoot数据库为 MySQL且客户要求在内网私有部署。考虑到集团业务广泛客户涉及教育、政府、银行等多个行业还必须支持信创国产化软硬件环境包括多种 CPU 架构x86 的 Intel、AMD、兆芯、海光arm 的鲲鹏、飞腾龙芯的 mips、LoongArch以及众多操作系统Windows、macOS、Linux、RedHat、Ubuntu、CentOS、中标麒麟、银河麒麟、统信 UOS 等信创国产化操作系统。目前我正全身心投入到寻找合适产品并推动开发落地的工作中以下是我的详细记录。产品查找与评估广泛搜索我第一时间组织团队成员在各大知名技术论坛如 CSDN、Stack Overflow 中文版、开源社区GitHub、Gitee以及专业软件评测平台上展开全面搜索。重点关注那些支持多种文档格式导入、具备图片自动上传功能且能良好适配 wangEditor5 编辑器的开源项目。经过初步筛选我们锁定了几个有潜力的项目分别是 [项目 A 名称]、[项目 B 名称]和 [项目 C 名称]。深入剖析功能适配性项目 A功能较为丰富支持多种文档格式导入在图片处理方面也有一定能力。但在与 wangEditor5 编辑器的集成上存在较大问题需要大量修改底层代码才能实现无缝对接这无疑会增加开发成本和项目风险。而且对于文档样式的保留在复杂格式下会出现错乱无法满足客户对样式精准保留的要求。项目 B该项目在图片自动上传服务器方面表现出色上传过程稳定且速度快。然而它对 Excel、PPT 文档的导入支持不够完善只能提取部分基本信息无法完整呈现文档内容。另外在信创国产化软硬件环境的兼容性上仅支持部分主流操作系统对于一些特定的国产操作系统如中标麒麟、银河麒麟等存在兼容性问题。项目 C这款项目让我们眼前一亮。它不仅全面支持 Word、Excel、PPT、PDF 文档的导入而且与 wangEditor5 编辑器的集成非常友好提供了详细的集成文档和示例代码大大降低了开发难度。在图片处理方面能够实现一键粘贴后图片自动上传到服务器并且上传过程安全可靠。更重要的是它对文档样式的保留堪称完美无论是字体、字号、颜色还是大小等信息都能精准还原。经过测试在各种信创国产化软硬件环境下都能稳定运行完全符合项目需求。开源情况项目 C 是完全开源的这为我们后续的二次开发和定制化提供了极大的便利。公司研发团队可以基于源代码进行深入开发和优化以满足不同客户的个性化需求。技术支持服务与项目 C 的开发团队取得了联系了解到他们提供 7*24 小时在线技术支持服务。这对于我们这样一个对项目进度和质量要求极高的团队来说至关重要能够在遇到问题时及时得到专业的解答和帮助确保项目顺利进行。综合以上评估我们最终决定选择项目 C 作为此次开发的核心基础。开发过程环境搭建前端环境使用 vue2 - cli 框架搭建前端项目结构安装 wangEditor5 编辑器以及项目 C 相关的前端依赖库。配置好开发环境和生产环境的参数确保项目能够在不同环境下正常运行。# 创建 vue2 项目vue init webpack news -import- project# 进入项目目录cdnews -import- project# 安装 wangEditor5npminstallwangeditor/editor wangeditor/editor -for- vue --save# 安装项目 C 前端依赖假设为 project - c - frontendnpminstallproject - c - frontend --save后端环境基于 SpringBoot 搭建后端服务配置 MySQL 数据库连接集成项目 C 的后端 SDK。在内网服务器上部署后端服务进行基本的网络配置和安全设置确保服务能够正常启动和访问。// SpringBoot 启动类示例importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;SpringBootApplicationpublicclassNewsImportApplication{publicstaticvoidmain(String[]args){SpringApplication.run(NewsImportApplication.class,args);}}功能集成与开发文档导入功能集成根据项目 C 提供的文档在前端页面中添加文档导入按钮并绑定相应的事件处理函数。在事件处理函数中调用项目 C 的前端 API 实现不同格式文档的读取和解析。import { Editor, Toolbar } from wangeditor/editor - for - vue; import { importDocument } from project - c - frontend; // 假设项目 C 前端导出 importDocument 方法 export default { components: { Editor, Toolbar }, data() { return { editor: null, toolbarConfig: {}, editorConfig: { placeholder: 请输入内容... } }; }, mounted() { this.editor new Editor({ selector: #editor - container, config: this.editorConfig, mode: default }); }, methods: { handleDocumentImport(event) { const file event.target.files[0]; if (file) { importDocument(file).then(html { this.editor.cmd.do(insertHTML, html); }); } } }, beforeDestroy() { if (this.editor null) return; this.editor.destroy(); } };图片自动上传功能开发在项目 C 解析文档的过程中拦截图片数据并将其通过后端 API 上传到内网服务器。后端接收图片数据后进行存储和处理并返回图片的访问地址。前端将返回的地址替换到文档中相应的图片位置。// 前端图片上传处理示例import{uploadImageToInnerServer}from/api/image;// 假设自定义的内网图片上传 API// 在项目 C 的图片处理回调中调用functionhandleImageUpload(imageFile){returnuploadImageToInnerServer(imageFile).then(response{returnresponse.data.url;// 返回图片在内网服务器的访问地址});}// 后端图片上传接口示例importorg.springframework.web.bind.annotation.*;importorg.springframework.web.multipart.MultipartFile;importjava.io.File;importjava.io.IOException;importjava.util.UUID;RestControllerRequestMapping(/api/inner/image)publicclassInnerImageUploadController{privatestaticfinalStringUPLOAD_DIR/path/to/inner/server/upload/directory;PostMapping(/upload)publicStringuploadImage(RequestParam(file)MultipartFilefile){try{StringoriginalFilenamefile.getOriginalFilename();StringfileExtensionoriginalFilename.substring(originalFilename.lastIndexOf(.));StringnewFilenameUUID.randomUUID().toString()fileExtension;FiledestnewFile(UPLOAD_DIRFile.separatornewFilename);file.transferTo(dest);// 返回图片在内网服务器的访问地址returnhttp://inner - server - ip:port/upload/newFilename;}catch(IOExceptione){e.printStackTrace();return上传失败;}}}样式保留优化对项目 C 解析文档样式的过程进行细致调试和优化确保在不同格式的文档下都能准确保留样式。对于一些特殊的样式情况通过自定义 CSS 样式表进行覆盖和调整。/* 自定义样式示例 */#editor - container p{margin:10px 0;line -height:1.6;}#editor - container h1{font -size:24px;color:#333;}信创国产化环境适配CPU 架构适配针对不同的 CPU 架构对项目代码进行编译和优化确保在各种架构下都能高效运行。与硬件供应商合作进行实际测试和调优解决可能出现的性能问题和兼容性问题。操作系统适配在各种信创国产化操作系统上进行全面测试包括安装、运行、功能使用等方面。针对不同操作系统的特点对系统配置文件和依赖库进行调整和优化确保系统在这些环境下能够稳定运行。测试与优化功能测试对文档导入、图片上传和样式保留等功能进行全面测试包括不同格式的文档、不同大小的图片以及各种复杂的样式情况。记录测试过程中发现的问题并及时反馈给开发团队进行修复。性能测试模拟多用户同时进行文档导入操作测试系统的性能和稳定性。对系统的响应时间、吞吐量等指标进行监控和分析对性能瓶颈进行优化如采用异步上传图片、优化数据库查询等方式。兼容性测试在不同的信创国产化软硬件环境下进行兼容性测试确保系统在各种环境下都能正常运行。同时测试在不同浏览器包括信创国产浏览器上的兼容性解决可能出现的兼容性问题。总结与展望经过团队的不懈努力项目后台管理系统新闻模块的文档导入功能已经基本开发完成并经过了全面的测试和优化。该功能完全满足了国家能源集团客户的需求实现了多种文档格式的导入、Word 内容一键粘贴、图片自动上传以及文档样式的精准保留。在开发过程中项目 C 的开发团队提供了及时有效的技术支持帮助我们解决了许多技术难题。后续我们将继续关注系统的运行情况收集用户反馈对系统进行持续优化和改进。同时加强与集团内其他子公司的交流与合作将此次开发的经验和成果进行分享和推广为集团的业务发展做出更大的贡献。复制插件文件安装jquerynpm install jquery导入组件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化组件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:HelloWorld,data(){return{msg:Welcome to Your Vue.js App}},mounted(){vareditornewE(#editor);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});zyCapture.getInstance({config:{PostUrl:http://localhost:8891/upload.aspx,License2:,FileFieldName:file,Fields:{uname:test},ImageUrl:http://localhost:8891{url}}})// zyoffice// 使用前请在服务端部署zyoffice// http://www.ncmem.com/doc/view.aspx?id82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:http://localhost:13710/zyoffice/word/convert,wordExport:http://localhost:13710/zyoffice/word/export,pdf:http://localhost:13710/zyoffice/pdf/upload})// 注册菜单E.registerMenu(zyCaptureBtn,zyCaptureBtn)E.registerMenu(WordPasterBtn,WordPasterBtn)E.registerMenu(ImportWordToImgBtn,ImportWordToImgBtn)E.registerMenu(NetImportBtn,NetImportBtn)E.registerMenu(WordImportBtn,WordImportBtn)E.registerMenu(ExcelImportBtn,ExcelImportBtn)E.registerMenu(PPTImportBtn,PPTImportBtn)E.registerMenu(PDFImportBtn,PDFImportBtn)E.registerMenu(importWordBtn,importWordBtn)E.registerMenu(exportWordBtn,exportWordBtn)E.registerMenu(importPdfBtn,importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}测试前请配置图片上传接口并测试成功接口测试接口返回JSON格式参考为编辑器添加按钮components:{Editor,Toolbar},data(){return{editor:null,html:dd,toolbarConfig:{insertKeys:{index:0,keys:[zycapture,wordpaster,pptimport,pdfimport,netimg,importword,exportword,importpdf]}},editorConfig:{placeholder:},mode:default// or simple}},整合效果导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例