在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中看到的程序如下图所示

2. 按Ctrl + C停止程序。然后引入扫描仪控制的组件

npm install [email protected]
npm install @types/dwt

这样我们就引入了名为dwt的控件（https://www.npmjs.com/package/dwt），在web-scan\node_modules\dwt中可以看到相关资源

3. 将dist目录拷贝一份到web-scan\src\assets

4. 打开index.html，加入对dwt控件相关JS的引用

  <script src="assets/dist/dynamsoft.webtwain.config.js"></script>
  <script src="assets/dist/dynamsoft.webtwain.initiate.js"></script>

5. 修改app.component.html如下

<div style="text-align:center">
  <h1>
    {{ title }}
  </h1>
  <button id="btnScan" (click)="acquireImage()">Scan</button>
  <div id="dwtcontrolContainer" style="margin: 0 auto; max-width: 270px;"></div>
</div>

6. 打开app.component.ts，引入dwt 控件的types，并加上OnInit的引用，在对应的ngOnInit中初始化dwt控件

/// <reference types="dwt" />

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Web Scanning!';
  DWObject:any;
  ngOnInit() {
    Dynamsoft.WebTwainEnv.Load();
    Dynamsoft.WebTwainEnv.RegisterEvent("OnWebTwainReady", () => { this.Dynamsoft_OnReady() });
  }
  Dynamsoft_OnReady():void{
    this.DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
  }
};

7. 再加上函数acquireImage()的定义

  acquireImage(): void {
    if (this.DWObject) {
      this.DWObject.SelectSource(() => {
        this.DWObject.OpenSource();
        this.DWObject.AcquireImage();
      }, () => { });
    }
  }

8. 再跑一遍程序

ng serve

9. 跟着网页的提示安装必需的本地dwt控件并刷新

刷新后

确保本地已经安装了扫描的情况下，尝试扫描一个文件。效果不错！

有问题？联系免费快速的中国区技术支持

https://www.damingsoft.com/ContactUs.aspx

关于dwt控件更多的信息，参考其官方文档

介绍：https://www.dynamsoft.com/Products/WebTWAIN_Overview.aspx

展示：https://demo.dynamsoft.com/dwt/online_demo_scan.aspx

接口：https://developer.dynamsoft.com/dwt/api-reference

示例：https://www.dynamsoft.com/Downloads/WebTWAIN-Sample-Download.aspx

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

猜你喜欢