在Angular web项目中调用本地扫描仪扫描文档

简介

近年来，越来越多的Web程序开始基于单页应用模型（Single-Page Applications，SPA）来构建。作为其中的佼佼者，Angular得到了广泛的应用。Web程序中不少是文档管理系统document management system (DMS)或者具有文档管理的需求。在DMS中，文档电子化是最常见的一种需求而电子化一般意味着使用扫描仪将纸质文档转化为图片或者最常见的PDF格式。实际应用中，由于安全性的限制，浏览器或者说JavaScript是不能直接和本地硬件通信的。虽然HTML5最新的技术中，本地摄像头得到了有限的支持，但是扫描仪的直接支持依然遥遥无期。在这里，笔者将介绍一下在Angular程序中比较流行的针对扫描仪使用的解决方案。

开发测试环境要求

node: 9.6+ 
npm: 5.6+

参考 https://www.npmjs.com/get-npm

1. 创建一个Angular CLI 程序框架。详细信息请见 https://cli.angular.io

npm install -g @angular/cli
ng new web-scan
cd web-scan
ng serve

这样一个angular 的程序就构建好了，在Firefox中看到的程序如下图所示