How to Build a Document Scanning and Management App with Angular
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.
What you’ll build: A browser-based document management app in Angular that acquires images from TWAIN-compatible scanners and loads local files using the Dynamic Web TWAIN SDK.
Key Takeaways
- Dynamic Web TWAIN integrates into Angular projects via npm and works as a standard Angular component with
ngOnInit()lifecycle initialization. - The SDK supports both hardware scanner acquisition (TWAIN protocol) and local file loading (PDF, TIFF, JPEG, PNG) through a unified JavaScript API.
- Resource files must be mapped in
angular.jsonassets to ensure the SDK’s service worker and WASM modules load correctly. - This approach works for enterprise document workflows including scanning, archiving, and multi-page document handling in the browser.
Common Developer Questions
- How do I integrate a document scanner into an Angular web application?
- How do I load and display local PDF and image files in Angular using Dynamic Web TWAIN?
- Why does Dynamic Web TWAIN fail to load resources in my Angular project?
Prerequisites
(Include JS libs, API docs and sample code)
- Get a 30-day free trial license for Dynamic Web TWAIN.
- Node.js and npm installed
- Angular CLI installed (
npm install -g @angular/cli)
Step 1: Set Up the Angular Project 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
Step 2: Integrate the Dynamic Web TWAIN SDK into Angular
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.
Common Issues and Edge Cases
- Dynamic Web TWAIN resources not found (404 errors): Ensure the
angular.jsonassets array includes the glob mapping from./node_modules/dwt/disttoassets/dwt-resources. Without this, the SDK’s service worker and WASM files will fail to load. - No scanner sources listed in the dropdown: The TWAIN service requires the Dynamsoft Service desktop app to be installed and running. On mobile or pure WASM mode, hardware scanner access is unavailable — use
openImage()for file-based input instead. - PDF files not rendering when loaded: Call
Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALLviaSetConvertModebefore loading PDFs. Without this setting, the SDK may skip PDF rendering and return blank pages.