在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 dwt@14.0.3
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

备注

如果你看到以下提示则表示你用的授权过期了。

解决方案为点击上图中标红的链接，获取一个新的授权并加上下面的代码中的第一句（在window.onload回调函数中）

...
Dynamsoft.WebTwainEnv.ProductKey = "<新的授权>";
Dynamsoft.WebTwainEnv.Load();
...

在Angular web项目中调用本地扫描仪扫描文档相关推荐

Java Web项目中使用Freemarker生成Word文档
Web项目中生成Word文档的操作屡见不鲜,基于Java的解决方案也是很多的,包括使用Jacob.Apache POI.Java2Word.iText等各种方式,其实在从Office 2003开始,就 ...
java web 操作word文档_Java Web项目中使用Freemarker生成Word文档
Web项目中生成Word文档的操作屡见不鲜.基于Java的解决方式也是非常多的,包含使用Jacob.Apache POI.Java2Word.iText等各种方式,事实上在从Office 2003開始 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
网页中调用matlab,在C#的Web项目中调用Matlab代码的步骤
在C#的Web项目中调用Matlab代码的方法为了毕设的图形检索方向的研究,本人需要在信科的师兄师姐们已经完成的C#界面中,调用现在研究的算法的Matlab代码,以便看到实验的效果.前段时间已经拖延 ...
Java项目中使用Freemarker生成Word文档
Web项目中生成Word文档的操作屡见不鲜,基于Java的解决方案也是很多的,包括使用Jacob.Apache POI.Java2Word.iText等各种方式,其实在从Office 2003开始,就 ...
关于在web项目中实现本地打印
1 问题描述在web项目,打印功能一直是一个老大难问题,而想进行套打,则更加上难上加难.而我在最近的项目中就遇到的条形码打印的需求,需要调用客户端的打印机发送指令进行打印.在由于该项目的用户在 ...
java 读取项目内图片,java web项目中读取本地图片
在项目中,因为业务需要,用户上传的图片存放在服务器的D盘中,为了读取并显示到页面上,尝试了两种方法: 一通过流读取 java代码: @RequestMapping(value = "/s ...
iis搭建web服务器中如何添加默认内容文档,利用IIS配置WEB服务器.pdf
实验六利用 IIS 配置 WWW服务器实验目的 1.了解 Windows 2000 Server 的网络组件,并进行安装和调试. 2.认识 WWW 服务的工作机制:掌握 WWW 服务的基本设置方法 ...
java调用扫描仪_通过Java调用Dynamsoft .NET TWAIN SDK控制扫描仪扫描文档
该楼层疑似违规已被系统折叠隐藏此楼查看此楼下载Dynamic .NET TWAIN 下载jni4net,学习里面的代码实例在环境变量中设置好JAVA_HOME和C:\Windows\Micros ...

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

在Angular web项目中调用本地扫描仪扫描文档相关推荐

最新文章

热门文章