More and more organizations have moved to the Office 365 / SharePoint environment for document management. This article introduces how to integrate Dynamic Web TWAIN SDK into SharePoint client-side web parts.
Developing Document Management Page for Office 365 SharePoint
According to Microsoft’s tutorial, we use following commands to initialize the skeleton of a new web part project:
mkdir helloworld
cd helloworld
npm install -g yo
npm install @microsoft/generator-sharepoint
yo @microsoft/sharepoint
Afterwards, we install Dynamic Web TWAIN via npm:
npm install dwt --save
Once the installation is done, we can import Dynamic Web TWAIN module to src/webparts/HelloWorldWebPart.ts as follows:
import Dynamsoft from 'dwt';
import { WebTwain } from 'dwt/dist/types/WebTwain';
The onInit() function is the appropriate place for initializing Dynamic Web TWAIN object:
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) {
Dynamsoft.DWT.Load();
} else {
setTimeout(() => checkScript(), 100);
}
};
checkScript();
});
}
public Dynamsoft_OnReady(): void {
this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
this.bWASM = Dynamsoft.Lib.env.bMobile || !Dynamsoft.DWT.UseLocalService;
}
Here, a valid license is required to make the SDK work. The resource path points to the CSS, JS and installer files of Dynamic Web TWAIN, which can be found at node_modules/dwt/dist. In order to load them successfully, we add the following code snippet in gulpfile.js to copy these assets to the directory we set:
let resCopy = build.subTask('resCopy', (gulp, buildOptions, done) => {
gulp.src('./node_modules/dwt/dist/**.*')
.pipe(gulp.dest('./dist/'));
gulp.src('./node_modules/dwt/dist/dist/**.*')
.pipe(gulp.dest('./dist/dist'));
gulp.src('./node_modules/dwt/dist/addon/**.*')
.pipe(gulp.dest('./dist/addon'));
gulp.src('./node_modules/dwt/dist/src/**.*')
.pipe(gulp.dest('./dist/src'));
done();
})
build.rig.addPreBuildTask(resCopy);
Finally, we add a button and its corresponding function for scanning documents:
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(this.properties.description)}</p>
<button class="${ styles.button } id="scan">Scan</button>
<div id="${this.containerId}"></div>
</div>
</div>
</div>
</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.OpenSource();
this.DWObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
} else {
alert("No Source Available!");
}
}
Now, enter the following command to build and preview your web part:
gulp serve
Source Code
https://github.com/yushulx/sharepoint-web-twain-document-scan
Oldest comments (0)