news 2026/3/20 13:58:09

互联网医院如何通过JS实现电子病历截图到网页的自动命名？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
互联网医院如何通过JS实现电子病历截图到网页的自动命名？

江西铁路行业集团公司项目需求解决方案

项目背景

作为江西铁路行业集团公司的项目负责人，我近期负责一个企业网站后台管理系统的升级项目。项目新增需求包括在文章发布模块中增加Word粘贴功能、Word文档导入功能以及微信公众号内容粘贴功能。这些功能需要通过在Web编辑器工具栏中添加插件按钮来实现，确保集成简单、不影响现有系统功能，并且支持多平台、多浏览器环境。

技术选型与需求分析

前端技术栈

  • 框架: Vue3 CLI (部分项目使用React)
  • 编辑器: 百度开源富文本编辑器UEditor
  • 浏览器兼容性: 包括IE8在内的所有浏览器，以及信创国产浏览器（奇安信安全浏览器、龙芯浏览器、红莲花安全浏览器等）

后端技术栈

  • 框架: JSP
  • 开发工具: Eclipse JEE、MyEclipse、IntelliJ IDEA
  • 数据库: MySQL
  • 服务器: 阿里云ECS（CentOS、RedHat）
  • 云存储: 阿里云对象存储（OSS），支持私有云、公有云、混合云

其他要求

  • 信创国产化环境支持: Windows、macOS、Linux、RedHat、CentOS、Ubuntu、中标麒麟、银河麒麟、统信UOS
  • CPU支持: x86 (Intel, AMD, 兆芯, 海光), ARM (鲲鹏, 飞腾), 龙芯 (MIPS, LoongArch)
  • 预算: 98万以内，买断产品源代码，提供编译打包发布培训指导
  • 资质要求: 软件厂商需提供至少5个央企、国企或政府事业单位项目合作资料（合同原件、银行转账凭证、信创环境兼容认证书、软件产品著作权、营业执照、法人身份证原件）

解决方案

前端实现

1. 增加UEditor插件按钮

在UEditor的工具栏中增加自定义按钮，用于触发Word粘贴和导入功能。

// 在UEditor配置文件中增加自定义按钮UE.registerUI('wordImport',function(editor,uiName){varbtn=newUE.ui.Button({name:uiName,title:'Word导入',onclick:function(){// 触发文件选择对话框document.getElementById('wordImportInput').click();}});editor.addListener('ready',function(){editor.afterConfigReady(function(){editor.ui.add(btn);});});returnbtn;});// 隐藏的文件输入元素varfileInput=document.createElement('input');fileInput.type='file';fileInput.id='wordImportInput';fileInput.accept='.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf';fileInput.style.display='none';fileInput.onchange=function(e){varfile=e.target.files[0];if(file){handleFileImport(file);}};document.body.appendChild(fileInput);functionhandleFileImport(file){varformData=newFormData();formData.append('file',file);fetch('/api/upload',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.success){// 将返回的HTML内容插入编辑器vareditor=UE.getEditor('editor');editor.setContent(data.content,true);}else{alert('导入失败: '+data.message);}}).catch(error=>{console.error('Error:',error);alert('导入过程中发生错误');});}
2. 微信公众号内容粘贴功能

实现微信公众号文章的粘贴功能，自动下载图片并上传到服务器。

UE.registerUI('wechatPaste',function(editor,uiName){varbtn=newUE.ui.Button({name:uiName,title:'粘贴微信公众号内容',onclick:function(){// 监听粘贴事件editor.addListener('paste',function(type,evt){varhtml=evt.html;if(html){processWechatContent(html,editor);}});}});editor.addListener('ready',function(){editor.afterConfigReady(function(){editor.ui.add(btn);});});returnbtn;});functionprocessWechatContent(html,editor){vartempDiv=document.createElement('div');tempDiv.innerHTML=html;varimgs=tempDiv.querySelectorAll('img');varpromises=[];imgs.forEach(img=>{varsrc=img.src;if(src.startsWith('http')){promises.push(downloadAndUploadImage(src).then(newUrl=>{img.src=newUrl;}));}});Promise.all(promises).then(()=>{editor.setContent(tempDiv.innerHTML,true);});}functiondownloadAndUploadImage(url){returnfetch(url).then(response=>response.blob()).then(blob=>{varformData=newFormData();formData.append('file',blob,'image.jpg');returnfetch('/api/uploadImage',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.success){returndata.url;}else{thrownewError('图片上传失败');}});});}

后端实现

1. 文件上传接口

处理Word、Excel、PPT、PDF文件的上传和内容提取。

@WebServlet("/api/upload")publicclassFileUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePart=request.getPart("file");StringfileName=filePart.getSubmittedFileName();InputStreamfileContent=filePart.getInputStream();// 根据文件类型处理Stringcontent="";if(fileName.endsWith(".doc")||fileName.endsWith(".docx")){content=WordProcessor.extractContent(fileContent);}elseif(fileName.endsWith(".xls")||fileName.endsWith(".xlsx")){content=ExcelProcessor.extractContent(fileContent);}elseif(fileName.endsWith(".ppt")||fileName.endsWith(".pptx")){content=PptProcessor.extractContent(fileContent);}elseif(fileName.endsWith(".pdf")){content=PdfProcessor.extractContent(fileContent);}// 返回处理后的HTML内容response.setContentType("application/json");response.setCharacterEncoding("UTF-8");response.getWriter().write(String.format("{\"success\": true, \"content\": \"%s\"}",escapeJsonString(content)));}privateStringescapeJsonString(Stringinput){returninput.replace("\\","\\\\").replace("\"","\\\"");}}
2. 图片上传接口

处理从微信公众号内容中提取的图片上传。

@WebServlet("/api/uploadImage")publicclassImageUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePart=request.getPart("file");InputStreamfileContent=filePart.getInputStream();StringfileName=filePart.getSubmittedFileName();// 生成唯一文件名StringuniqueFileName=UUID.randomUUID().toString()+fileName.substring(fileName.lastIndexOf('.'));// 上传到阿里云OSSStringfileUrl=AliyunOssUtil.uploadFile(uniqueFileName,fileContent);// 返回图片URLresponse.setContentType("application/json");response.setCharacterEncoding("UTF-8");response.getWriter().write(String.format("{\"success\": true, \"url\": \"%s\"}",fileUrl));}}

阿里云OSS工具类

importcom.aliyun.oss.OSS;importcom.aliyun.oss.OSSClientBuilder;importjava.io.InputStream;publicclassAliyunOssUtil{privatestaticfinalStringENDPOINT="your-oss-endpoint";privatestaticfinalStringACCESS_KEY_ID="your-access-key-id";privatestaticfinalStringACCESS_KEY_SECRET="your-access-key-secret";privatestaticfinalStringBUCKET_NAME="your-bucket-name";publicstaticStringuploadFile(StringobjectName,InputStreaminputStream){// 创建OSSClient实例OSSossClient=newOSSClientBuilder().build(ENDPOINT,ACCESS_KEY_ID,ACCESS_KEY_SECRET);try{// 上传文件流ossClient.putObject(BUCKET_NAME,objectName,inputStream);// 返回文件访问URLreturn"https://"+BUCKET_NAME+"."+ENDPOINT+"/"+objectName;}finally{// 关闭OSSClientossClient.shutdown();}}}

项目部署与集成

前端部署

  1. 将前端代码打包后部署到Web服务器（如Nginx、Apache）。
  2. 确保UEditor的配置文件正确指向后端接口。

后端部署

  1. 使用Eclipse JEE、MyEclipse或IntelliJ IDEA导入项目。
  2. 配置数据库连接和阿里云OSS参数。
  3. 打包为WAR文件并部署到Tomcat服务器。

信创环境兼容性

确保所有组件和依赖库在以下环境中运行正常：

  • 操作系统: Windows, macOS, Linux, RedHat, CentOS, Ubuntu, 中标麒麟, 银河麒麟, 统信UOS
  • 浏览器: IE8及以上, 奇安信安全浏览器, 龙芯浏览器, 红莲花安全浏览器
  • CPU架构: x86, ARM, 龙芯

预算与授权

  • 预算: 98万以内，买断产品源代码。
  • 授权: 无限制使用，提供编译打包发布培训指导。
  • 资质要求: 软件厂商需提供至少5个央企、国企或政府事业单位项目合作资料。

总结

通过上述方案，我们可以在现有系统中无缝集成Word粘贴、Word文档导入和微信公众号内容粘贴功能，满足多平台、多浏览器环境的需求，并确保信创国产化环境的兼容性。项目部署简单，不影响现有系统功能，能够大大提升用户的使用体验。

复制插件目录

引入插件文件

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"]]

初始化控件

varpos=window.location.href.lastIndexOf("/");varapi=[window.location.href.substr(0,pos+1),"asp/upload.asp"].join("");WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});//加载控件

注意

如果接口字段名称不是file，请配置FileFieldName。ueditor接口中使用的upfile字段

点击查看详细教程

配置ImageMatch

匹配图片地址，如果服务器返回的是JSON则需要通过正则匹配

ImageMatch:'',

点击参考链接

配置ImageUrl

为图片地址增加域名，如果服务器返回的图片地址是相对路径，可通过此属性添加自定义域名。

ImageUrl:"",

点击查看详细教程

配置SESSION

如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。
参考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。

上传网络图片

下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/3/19 1:02:10

Windows SMB RCE漏洞CVE-2025-33073分析与利用工具

Windows SMB RCE漏洞CVE-2025-33073分析与利用工具 项目描述 该项目是一个针对Windows SMB客户端远程代码执行漏洞CVE-2025-33073的安全研究与渗透测试工具集。该漏洞被标记为高危（CVSS 8.8分），影响Windows 10、11及Server 2012-2025的所有版…

作者头像 李华
网站建设 2026/3/20 10:36:08

基于YOLOv5/v8/v10的手势识别系统：从理论到全栈实践

摘要 手势识别作为人机交互的重要方式，在虚拟现实、智能家居、无障碍通信等领域具有广泛应用价值。本文系统介绍了基于YOLO系列目标检测算法的手势识别完整解决方案，涵盖YOLOv5、YOLOv8和YOLOv10三个版本的核心技术对比，提供了完整的训练数据…

作者头像 李华
网站建设 2026/3/18 11:39:10

好写作AI：交叉学科“翻译官”，终结你的“学术巴别塔”困境！

各位在多个学科夹缝中“反复横跳”、左手生物学术语右手代码参数的交叉学科卷王们，是否经常这样：脑中的idea融合了A学科的深邃理论与B学科的犀利方法，感觉自己站在创新的潮头，一下笔却发现——“我写的这段话，两边领域…

作者头像 李华
网站建设 2026/3/18 6:04:58

基于Python 图形学实验（生成中间帧）

图形学实验: 生成中间帧 给定初始图片和结束图片，生成中间的N帧，使得首尾自然过渡 开发环境 开发环境：macOS Mojave 10.14.6开发软件：PyCharm 2019.1.3开发语言：python 如何运行 将项目文件夹拷贝到本地环境运行s…

作者头像 李华
网站建设 2026/3/18 10:08:42

从理论到实践：Node-RED性能优化的完整案例解析

在物联网和自动化领域，Node-RED以其直观的可视化编程界面赢得了众多开发者的青睐。然而，许多用户在实际应用中都会遇到一个共同的问题：为什么我的Node-RED流程看起来逻辑清晰，运行起来却异常缓慢？ 为什么你的Node-RED…

作者头像 李华
网站建设 2026/3/20 6:06:12

亲测好用10个降AIGC工具 千笔AI帮你高效降AI率

AI降重工具的崛起与实用价值 在当前学术写作日益依赖AI生成内容的背景下，越来越多的学生和研究者开始关注如何有效降低AIGC率、去除AI痕迹，同时保持文章的逻辑性和语义通顺。这不仅关乎论文通过查重系统的标准，更直接影响到学术诚信和论文质…

作者头像 李华