Angular Development: Building Document Management Application

As the world best web document scanning SDK, Dynamic Web TWAIN supports all mainstream web application frameworks. This tutorial goes through the steps to build a simple document management application using Dynamic Web TWAIN and Angular.

Angular Dynamic Web TWAIN

What You Should Know About Dynamic Web TWAIN

  • (Include JS libs, API docs and sample code)

Getting Started with Angular CLI

To initialize the skeleton of an Angular project, we use Angular CLI - a command-line tool that can be installed via npm command:

npm install -g @angular/cli

We use the following commands to generate and run an Angular project:

ng new web-scan
cd web-scan
ng serve --open

Integrating Dynamic Web TWAIN into an Angular Project

If you are using an old version of Dynamic Web TWAIN, you’d better upgrade it to the latest version in order to make it compatible with Angular.

The Dynamic Web TWAIN SDK is available for download via npm package manager:

npm install dwt --save

After installing the node module, we can create a new Angular component named dwt and import the Dynamic Web TWAIN module to the src/app/dwt/dwt.component.ts file:

ng generate component dwt

import Dynamsoft from 'dwt';
import { WebTwain } from 'dwt/dist/types/WebTwain';

The next step is to initialize the Dynamic Web TWAIN object in ngOnInit():

ngOnInit(): void {
  Dynamsoft.DWT.CustomizableDisplayInfo = { buttons: {}, dialogText: {} };
  Dynamsoft.DWT.Containers = [{ WebTwainId: 'dwtObject', ContainerId: this.containerId, Width: '300px', Height: '400px' }];
  Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => { this.Dynamsoft_OnReady(); });
  Dynamsoft.DWT.ProductKey = 'Product-KEY';
  Dynamsoft.DWT.ResourcesPath = 'assets/dwt-resources';
  Dynamsoft.DWT.Load();
}

Dynamsoft_OnReady(): void {
  this.DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
  this.bWASM = Dynamsoft.Lib.env.bMobile || !Dynamsoft.DWT.UseLocalService;
  let count = this.DWObject.SourceCount;
  this.selectSources = <HTMLSelectElement>document.getElementById("sources");
  this.selectSources.options.length = 0;
  for (let i = 0; i < count; i++) {
    this.selectSources.options.add(new Option(this.DWObject.GetSourceNameItems(i), i.toString()));
  }
}

To make resource files foundable, we must define the resource path as an asset in the angular.json file as well:

"src/assets",
{
  "glob": "**/*",
  "input": "./node_modules/dwt/dist",
  "output": "assets/dwt-resources"
}

You also need to request a trial license in your Dynamsoft account, and then update Dynamsoft.DWT.ProductKey to make the SDK work.

We are going to add two buttons: one for acquiring images from a document scanner, and the other for loading images from local hard drive:

acquireImage(): void {
  if (!this.DWObject)
    this.DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');

  if (this.DWObject.SourceCount > 0 && this.DWObject.SelectSourceByIndex(this.selectSources.selectedIndex)) {
    const onAcquireImageSuccess = () => { this.DWObject.CloseSource(); };
    const onAcquireImageFailure = onAcquireImageSuccess;
    this.DWObject.OpenSource();
    this.DWObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
  } else {
    alert("No Source Available!");
  }
}

openImage(): void {
  if (!this.DWObject)
    this.DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');

  this.DWObject.IfShowFileDialog = true;
  this.DWObject.Addon.PDF.SetConvertMode(Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL);
  this.DWObject.LoadImageEx("", Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL,
    function () {
      //success
    }, function () {
      //failure
    });
}

The corresponding UI elements are defined in the src/app/dwt/dwt.component.html file:

<div style="text-align: center;">
    <p>Select a device and scan or open a local file:</p>
    <select id="sources" style="width: 100%;"></select><br />
    <button (click)="acquireImage()" style="width: 49%;">Scan Documents</button>
    <button (click)="openImage()" style="width: 49%; margin:0.5em 0 1em 2%;">Open Documents</button>
    <div id="dwtcontrolContainer"></div>
</div>

Finally, we add the Angular component to src/app/app.component.html:

<div class="content" role="main">

  <app-dwt></app-dwt>

</div>

A simple web document management application is done. You can refresh the page to have fun with it.

Angular web document management

Source Code

https://github.com/dynamsoft-dwt/angular-cli-application