How to Implement Document Management in Office 365 SharePoint

Key Features of Dynamic Web TWAIN SDK

  • Provides ActiveX for working with 32 bit and 64 bit Internet Explorer.
  • Provides Plugin for working with Chrome, Firefox, Safari on Windows, macOS, and Linux
  • Capable of scanning images from scanners and other TWAIN compatible devices
  • Support for BMP, JPEG, PNG, single/multi-page PDF and single/multi-page TIFF
  • Supports cookie & session integration.
  • Downloads/Uploads image(s) through HTTP/HTTPS or FTP.
  • Supports JavaScript + HTML/HTML5 on the client side
  • No limit on the server-side platform/language. You can use ASP.NET, PHP, JSP, ASP, VB.NET, etc.
mkdir helloworldcd helloworldnpm install -g yonpm install @microsoft/generator-sharepointyo @microsoft/sharepoint
npm install dwt --save
import Dynamsoft from 'dwt';import { WebTwain } from 'dwt/dist/types/WebTwain';
protected onInit(): Promise<void> {
return super.onInit().then(_ => {

// Initialize the WebTwain object
Dynamsoft.DWT.Containers = [{ WebTwainId: 'dwtObject', ContainerId: this.containerId, Width: '300px', Height: '400px' }];
Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => { this.Dynamsoft_OnReady(); });
Dynamsoft.DWT.ResourcesPath = '/dist';
Dynamsoft.DWT.ProductKey = 'LICENSE-KEY';
let checkScript = () => {
if (Dynamsoft.Lib.detect.scriptLoaded) {
} else {
setTimeout(() => checkScript(), 100);

public Dynamsoft_OnReady(): void {
this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
this.bWASM = Dynamsoft.Lib.env.bMobile || !Dynamsoft.DWT.UseLocalService;
let resCopy = build.subTask('resCopy', (gulp, buildOptions, done) => {
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.helloWorld }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Welcome to SharePoint!</span>
<p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
<p class="${ styles.description }">${escape(}</p>
<button class="${ styles.button } id="scan">Scan</button>
<div id="${this.containerId}"></div>
this.button = this.domElement.querySelector('button');
this.button.addEventListener('click', this.acquireImage.bind(this));

public acquireImage(): void {
if (!this.DWObject)
this.DWObject = Dynamsoft.DWT.GetWebTwain();
if (this.bWASM) {
alert("Scanning is not supported under the WASM mode!");
else if (this.DWObject.SourceCount > 0) {
const onAcquireImageSuccess = () => { this.DWObject.CloseSource(); };
const onAcquireImageFailure = onAcquireImageSuccess;
this.DWObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
} else {
alert("No Source Available!");
gulp serve

Source Code




Manager of Dynamsoft Open Source Projects | Tech Lover

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Xiao Ling

Xiao Ling

Manager of Dynamsoft Open Source Projects | Tech Lover

More from Medium

Over The Edge With Edge

5 common data aggregation mistakes and how to fix them | Intertrust

Restore SQL Server DB backup from Azure Blob into SQL Server Managed Instance using T-SQL

Uses of Tabular Editor in  Power BI