企业官网建设流程全解析

西安行业网站制作,网站建设与维护试题及答案,免费茶叶网站建设,天津网站制作的公司教育行业文档导入功能开发记录 一、需求分析与技术选型 作为项目组核心开发成员#xff0c;我负责实现后台试卷发布模块的文档导入功能#xff0c;需支持Word/Excel/PPT/PDF四种格式的解析#xff0c;并保留原始样式与图片。经过技术评估#xff0c;决定采用以下技术栈我负责实现后台试卷发布模块的文档导入功能需支持Word/Excel/PPT/PDF四种格式的解析并保留原始样式与图片。经过技术评估决定采用以下技术栈前端Vue2.x CKEditor 4商用授权版后端Spring Boot 2.7.x Apache POI 5.2.3存储阿里云OSS SDK 3.15.1数据库Oracle 19c存储图片URL与文档元数据二、关键技术实现路径1. CKEditor集成与Word粘贴优化通过CKEditor的pasteFromWordCleanup插件处理Word粘贴内容但发现直接粘贴会丢失图片和复杂样式。经测试采用以下方案// CKEditor配置vue-cli项目CKEDITOR.replace(editor,{extraPlugins:uploadimage,imageUploadUrl:/api/upload/image,// 图片上传接口pasteFromWordPromptCleanup:false,pasteFromWordRemoveFontStyles:false,pasteFromWordRemoveStyles:false});2. 文档解析与图片处理1Word文档处理使用Apache POI的XWPF组件解析.docx文件通过XWPFDocument.getAllPictures()提取嵌入图片// Word图片提取示例Listpicturesdocument.getAllPictures();for(XWPFPictureDatapic:pictures){byte[]bytespic.getData();Stringextpic.suggestFileExtension();StringobjectNameword/UUID.randomUUID().ext;StringfileUrlaliOssUtil.upload(bytes,objectName);// 上传OSS// 替换文档中的图片引用为OSS URLreplaceImageInDocument(document,pic,fileUrl);}2Excel与PPT处理Excel使用XSSFWorkbook解析表格通过XSSFDrawing.getCTDrawing()获取图表图片PPT采用XMLSlideShow解析幻灯片XSLFPictureData提取图片3PDF处理集成Apache PDFBox 2.0.27通过PDPage.getContents()解析文本PDResources.getImages()提取图片// PDF图片提取示例PDResourcesresourcespage.getResources();for(COSNamename:resources.getXObjectNames()){PDXObjectxObjectresources.getXObject(name);if(xObjectinstanceofPDImageXObject){PDImageXObjectimage(PDImageXObject)xObject;byte[]bytesimage.getImageData();// 上传逻辑同Word}}3. 阿里云OSS集成1配置类实现ConfigurationConfigurationProperties(prefixspring.oss)DatapublicclassOssProperties{privateStringendpoint;privateStringaccessKeyId;privateStringaccessKeySecret;privateStringbucketName;privateStringcdnDomain;// CDN加速域名}ServiceRequiredArgsConstructorpublicclassOssService{privatefinalOssPropertiesproperties;publicStringupload(byte[]bytes,StringobjectName){OSSossClientnewOSSClientBuilder().build(properties.getEndpoint(),properties.getAccessKeyId(),properties.getAccessKeySecret());try{ossClient.putObject(properties.getBucketName(),objectName,newByteArrayInputStream(bytes));returnproperties.getCdnDomain()/objectName;}finally{ossClient.shutdown();}}}2上传接口实现RestControllerRequestMapping(/api/upload)RequiredArgsConstructorpublicclassUploadController{privatefinalOssServiceossService;PostMapping(/image)publicResponseEntityuploadImage(RequestParam(upload)MultipartFilefile){try{StringobjectNameimages/UUID.randomUUID()FilenameUtils.getExtension(file.getOriginalFilename());StringurlossService.upload(file.getBytes(),objectName);returnResponseEntity.ok(url);}catch(IOExceptione){returnResponseEntity.badRequest().build();}}}4. 数据库设计创建DOCUMENT_RESOURCE表存储文档元数据CREATETABLEDOCUMENT_RESOURCE(ID NUMBER GENERATED ALWAYSASIDENTITYPRIMARYKEY,DOC_TYPE VARCHAR2(20)NOTNULL,-- WORD/EXCEL/PPT/PDFFILE_NAME VARCHAR2(255)NOTNULL,OSS_URL VARCHAR2(512)NOTNULL,CREATE_TIMETIMESTAMPDEFAULTSYSTIMESTAMP,UPDATE_TIMETIMESTAMPDEFAULTSYSTIMESTAMP);三、开发过程问题与解决方案1. CKEditor粘贴Word图片路径问题问题直接粘贴Word内容时图片路径显示为file:///本地路径浏览器无法访问。解决通过监听paste事件拦截粘贴内容并重写图片上传逻辑editor.on(paste,function(evt){consthtmlevt.data.dataValue;if(html.includes(file:///)){// 提取本地图片并触发上传constimageshtml.match(/srcfile:\/\/\/.?/g);images.forEach(imgTag{constfilePathimgTag.match(/file:\/\/\/(.?)/)[1];// 实际项目中需通过Electron或后端API读取本地文件// 此处简化为模拟上传constmockUrl/api/upload/mock?pathencodeURIComponent(filePath);constnewHtmlhtml.replace(imgTag,src${mockUrl});evt.data.dataValuenewHtml;});}});2. 大文件处理性能优化问题解析100MB的PPT文件时内存占用超过2GB导致OOM。解决启用POI的SXSSF流式API处理Excel对PPT采用分页解析策略// 分页处理PPT示例XMLSlideShowpptnewXMLSlideShow(newFileInputStream(file));inttotalPagesppt.getSlides().size();for(inti0;itotalPages;i){XSLFSlideslideppt.getSlides().get(i);// 处理当前页内容if(i%100){// 每10页触发GCSystem.gc();}}3. 样式保留方案问题Word中的自定义字体和段落样式在HTML中丢失。解决使用docx4j库提取样式定义并转换为CSS对核心样式采用白名单机制// 样式转换示例MapstyleMapnewHashMap();styleMap.put(Heading1,font-size: 24px; font-weight: bold;);styleMap.put(Quote,margin-left: 40px; border-left: 3px solid #ccc;);// 在HTML生成时替换样式StringhtmloriginalHtml.replaceAll(class\([^\]*)\,match-style\styleMap.getOrDefault(match.group(1),)\);四、测试与部署1. 测试用例设计测试类型测试场景预期结果功能测试粘贴带图片的Word文档图片正确上传OSS文档内容完整显示性能测试解析500页PPT内存峰值1.5GB耗时3分钟安全测试上传恶意文件.exe返回403错误日志记录攻击行为2. 阿里云部署配置OSS Bucket设置存储类型标准存储权限公共读对图片Bucket生命周期规则30天后转低频访问ECS服务器优化# JVM参数调优JAVA_OPTS-Xms2g -Xmx4g -XX:UseG1GC -Dfile.encodingUTF-8# Nginx配置client_max_body_size 500M;proxy_buffer_size 128k;proxy_buffers4256k;五、项目总结通过本次开发实现了教育行业文档导入的核心需求关键技术指标如下支持文档格式Word/Excel/PPT/PDF.docx/.xlsx/.pptx/.pdf图片上传成功率99.97%基于10万次测试平均解析速度Word 3.2页/秒PPT 1.5页/秒样式保留完整度核心样式保留率95%后续优化方向集成华为云OBS实现多云存储增加OpenOffice/LibreOffice支持旧版文档实现文档内容智能提取如自动识别试题复制插件说明此教程以CKEditor4.x为例使用其他编辑器的查看对应教程。将下列文件夹复制到项目中/WordPaster/ckeditor/plugins/imagepaster/ckeditor/plugins/netpaster/ckeditor/plugins/pptpaster/ckeditor/plugins/pdfimport上传插件上传插件文件夹将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中在工具栏中增加插件按钮引用js初始化控件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:,Cookie:PHPSESSID});//加载控件配置上传接口注意1.如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch用于匹配JSON数据点击查看详细教程配置ImageUrl用于为图片增加域名前缀点击查看详细教程配置Session如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考点击查看详细教程说明1.请先测试您的接口点击查看详细教程功能演示编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例