赵 亮，张德林，童 强，徐文皓，赵新林
（1.乌鲁木齐市科信恒达信息科技有限责任公司，新疆 乌鲁木齐 830000；
2.兵团科技发展促进中心）
近年来国家大力推动科技创新。各级科技部门不断加大科研投入的规模和强度，项目数量持续增加。项目中的申报书、任务书、结题验收材料、奖励材料等，形成了数以万计的档案资料，其中保存着大量有价值的文字、图表以及数据信息，这些数据信息是科技计划项目管理的重要依据，具有极高保存价值和分析、利用价值。这些资料以纸件、图片、word等多种载体形式存放，由于纸质资料的日积月累和保存不当、硬件设备老化，造成大量文档资料遗失在繁杂工作中，是科技管理部门的重大损失。同时，在日常科技计划管理工作中，存在着许多项目多头申报、重复立项、经费分布不均等情况，以人工记忆、手动筛查，无法实现准确有效的科学化管理。如果只是将档案简单的储存为电子文件格式，无法解决上述问题，目前国内使用OCR作为档案数字化手段的机构大多是使用需要下载或者安装的扫描仪软件、第三方扫描软件等。这类软件不但操作繁琐，而且识别区域局限。这在对于用户操作方面来说极为不便，因此通过互联网和信息开发技术建立一种能在实现科技项目档案数字化存储，对项目基本信息进行采集和标准化的功能就迫在眉睫[1]。这种功能可以通过网页快速、便捷地将各类项目文档转换为标准的数字化数据，为科技管理部门后期档案借阅管理、数据统计、查重分析等精准、高效的项目管理服务奠定基础。
本文将介绍使用Vue框架、Vue -cropper插件、ElementUI框架、JavaScript语言、OCR接口、MySQL数据库存储等技术，通过用户上传电子文档附件完成纸质科技计划项目档案数字化采集的过程。
1.1 基础搭建及封装
我们设计将纸质档案采集功能封装成一个独立组件，在不同项目中均可调用，项目使用主流的渐进式Vue框架。它是一套构建用户界面的前端框架，Vue中两个技术特点是纸质档案采集功能的核心部分：一是响应式数据绑定，当数据发生变化时，Vue自动更新视图，它的原理是利用了Object.definedProperty中的setter/getter 代理数据，监控对数据的操作，即用户无需刷新或跳转即可及时获取最新数据；
二是组合的视图组件，每个UI页面映射为组件树，组件可独立维护、可复用。
1.2 脚本编写
档案数字化其中方法函数使用JavaScript进行编写，JavaScript是一种可以被浏览器解析的解释型脚本语言，常用来为网页添加各式各样的动态功能，通常JavaScript脚本是通过嵌入在HTML中来实现自身功能，为用户提供更流畅美观的浏览效果。
1.3 视觉UI设计
为提高产品设计效率以及交互效果，我们使用ElementUI作为UI框架。它是一套为开发者、设计师和产品经理准备的基于Vue 2.0 的桌面端组件库。它封装了各种DOM组件，用其快速搭建页面原型或高保真视觉稿。
1.4 图片截取
纸质档案采集功能中选取识别区域使用Vuecropper截图插件作为底层基础，它是基于Vue的一个图片剪裁插件，该插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。其原理为形成裁剪区域，裁剪区域的大小和用户鼠标移动的距离相关联。获取到裁剪区域后通过canvas绘制成图片。
1.5 OCR识别
OCR接口用于经费下达文件及档案材料的扫描采集。表格OCR采用成熟的运营商接口，支持中英文图片/PDF内常规表格、无线表格、多表格的检测和识别，支持日文有线表格识别，返回每个单元格的文字内容，支持旋转的表格图片识别，且支持将识别结果保存为Excel 格式。图片OCR采用成熟的运营商接口，可以识别中文、英文等20种语言，且各种语言均支持与英文混合的文字识别。适用于印刷文档识别、网络图片识别、广告图文字识别、菜单识别、视频标题识别、头像文字识别等场景。
1.6 数据库
采集到的文档数据及其他相关信息的存储及读取使用采用MySQL数据库。MySQL是一款精巧且流行的关系型数据库管理系统，由于它的强大功能、灵活性、丰富的应用编程接口（API）以及成熟的系统结构，有着庞大的用户数基础，为建立基于数据库的动态网站提供了强大动力。MySQL 主要目标是快速、健壮和易用，能够提供多用户、多线程SQL数据库服务器，它所使用的SQL 语言是用于访问数据库的最流行的和最标准化的语言，使得存储、更新和存取信息更容易。
2.1 从识别到采集
科技项目纸质档案多为项目材料，含少量政策性文件。需提前人工扫描纸质档案，通过扫描设备转换为PDF格式或者常用图片格式（如JPG、PNG等）文件。再将文件通过平台内上传功能发送至服务器，服务器获取到文件后，分析文件类型调用不同的OCR接口，返回OCR识别后的数据至前端。再由前端渲染到网页中，根据用户操作，提交到服务器数据库保存，目的是存储电子档案并将电子文档中的数据采集提取后存储至数据库，生成完整电子和数字档案。见图1。
2.2 TableOCR组件封装
该组件集成了指定种类文件上传、进度条、起止页码输入框组功能。若用户采集科技计划项目的总条目，则需要上传相应的经费下达文件，因此我们设计由＜el-up load ＞组件作为出发点，经费下达文件一般为PDF格式包含该年度申报的所有项目，将accept设置为“.pdf”确保用户只能上传PDF文件。由于PDF文件大小、质量不一致，导致上传时间可能过长，为此加入页码输入框组，包含起始页码和结束页码。用户填写需要识别的页码（即项目列表页），上传指定页码的文件到后端，进行OCR识别。此处通过页码控制对不需要的页面进行忽略处理，大大减少了数据体积。上传时为增加用户体验及防止用户误操作，增加了＜el-progress ＞进度条。该组件目的是提供Excel转Table组件功能的前置数据。
2.3 后端处理文件
后端包括文件接收并保存、文档类型转换和OCR识别功能。
后端通过前端发出的API请求中传递的Form-Data对象获取到上传文件及起止页码；
判断传入文件大小和类型是否符合要求，只有100 Mb以下的PDF文件才可以进入识别；
因为对于图片进行OCR识别后的结果更为精准有效，所以要将需要识别的非图片文件转换成图片。将获取的文件每页进行拆分，调整分辨率和缩放比例，转存成图片格式；
文档拆分为图片格式，如图2。取得起止页码对应的图片，进行OCR文字识别，将识别后结果返回至前端，进行处理或展示。
2.4 Excel转Table组件封装
该组件集成表格展示、表单填写提交、表格快速复制、ExcelBase64转DOM功能。当后端将表格OCR转换完成的数据返回至前端时，用户需要一个页面来浏览和操作该数据。后端返回数据格式为ExcelBase64，通过xlsx.js转换成DOM字符串，我们使用Vue里的V-html方法将其渲染在＜el-dialog ＞弹窗组件中。若数据为多页，则通过JS中replace方法进行组合拼接后进行渲染。即用户上传完经费下达文件点击下一步，将弹出一个含有项目列表的表格弹窗。此时用户需求为通过该表格创建相应项目文件夹。我们设计将＜el-dialog ＞通过ElementUI中Layout 左右布局，左侧为表格面板，右侧为用户输入表单，即项目主要信息采集面板。采集信息均为经费下达文件中包含项，例如：项目编号、项目名称、主要承担单位等。为了方便用户操作，我们在Vue的Update生命周期中遍历表格中＜td ＞元素，并为其绑定样式及点击复制事件。用户点击单元格时，将该单元格中的文本数据复制到剪贴板并显示提示信息。该事件调用Vue -clipboard2插件。该组件目的是为了通过经费下达文件快速建立数字化的项目文档列表。
2.5 二次开发Vue-cropper组件
Vue-cropper是一个开源截图插件，由于地域、年份不同，项目附件格式并非统一，所以需要使用Vue-cropper用于截取需要的内容进行OCR识别，我们在Vue-cropper中添加确定按钮，按钮随拖动框移动，避免用户找不到确定按钮。其功能为点击确定发送截取后的图片至后端。同时也添加页面跳转输入框及功能按钮组，例如旋转、放大缩小、上一页下一页等，便于用户在该组件中对转换为图片的项目档案进行翻页操作。当后端返回截图图片识别结果后，添加一个弹框用于展示识别的截取图片及转换文字信息，上面附有复制按钮。该组件目的是为通过项目附件快速提取数字化项目详情信息数据。
科技计划项目档案数字化功能的设计目标就是针对现有科技项目纸质文档进行电子介质转化和储存，形成电子档案，以面向科技计划管理和科技创新为需求导向，利用网络信息技术手段，对科技项目电子档案中的信息进行数字化采集和标准化处理，利用数据库软件存储项目基本信息数据。而本文中所设计、论述的将Vue框架、Vue -cropper插件、JavaScript语言、OCR接口、MySQL数据存储等技术组合的方法用于开发构建的系统功能，通过研究、设计、实例开发和数据测试，得到验证，确实可以高效、准确的解决科技项目档案数字化采集难题，提高档案采集效率，减轻档案管理人员的工作压力。
依托科技项目数字档案的数据资源，通过数据标准化处理和储存，在后续的数据的共享和利用中，可以无缝对接各类科技管理部门的业务系统和科技资源大数据云平台，不仅可以实现各类科技信息数据的汇聚，进一步深度挖掘和分析科技数据资源，使科研人员能够快捷的获得科技项目资源统计、分析数据，为科技管理部门的高效决策提供数据支撑和理论依据；
还可以实现档案资源共享空间拓展，延伸扩充科技管理辅助服务的链路，提高科研管理部门、科技档案管理部门和科技咨询机构的服务能力。