Dynamic Web TWAIN es una biblioteca de JavaScript diseñada para escanear y administrar documentos. Este tutorial guía a través del desarrollo de React. Verá cómo combinar Reactjs y Dynamic Web TWAIN para crear una aplicación web simple que puede adquirir imágenes de un escáner de documentos y cargar imágenes desde un disco duro local.
Lo que debe saber sobre TWAIN web dinámico
Creación de una aplicación de gestión de documentos web con React
En los siguientes párrafos, primero crearemos el esqueleto de un proyecto React y luego integraremos Dynamic Web TWAIN en el proyecto para implementar el escaneo y la gestión de documentos.
Comenzar con un nuevo proyecto de React
Para crear un nuevo proyecto de React, puede elegir una de las siguientes formas:
npm
npm install -g create-react-app
create-react-app document-scan
npx
npx create-react-app document-scan
Hilo
yarn create react-app document-scan
Implementación del escaneo de documentos con Dynamic Web TWAIN SDK
Instale paquetes dependientes a través del comando npm:
npm install [email protected]
npm install @babel/core @babel/preset-env
npm i ncp -g
Dynamic Web TWAIN SDK consta de aplicaciones de servicio específicas de la plataforma (para la comunicación del escáner) y archivos de biblioteca de JavaScript, que se encuentran en el node_modules/dwt/dist Carpeta para programación y distribución. Usamos ncp para copiar recursos al public carpeta del proyecto React:
ncp node_modules/dwt/dist public/dwt-resources
El siguiente paso es crear un componente React en DynamsoftSDK.js :
import React from 'react';
import Dynamsoft from 'dwt';
export default class DWT extends React.Component {
constructor(props) {
super(props);
this.state = {
scanners: [],
currentScanner: "Looking for devices.."
};
this.DWObject = null;
this.containerId = 'dwtcontrolContainer';
this.width = "100%";
this.height = "600";
}
componentDidMount() {
}
render() {
return (
);
}
}
En componentDidMount() , establecemos la ruta del recurso para inicializar el objeto Dynamic Web TWAIN. Como el OnWebTwainReady se activa el evento, podemos obtener la información de los escáneres de documentos conectados y luego actualizar los elementos de la interfaz de usuario relevantes:
componentDidMount() {
Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => {
this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
if (this.DWObject) {
let vCount = this.DWObject.SourceCount;
let sourceNames = [];
for (let i = 0; i < vCount; i++)
sourceNames.push(this.DWObject.GetSourceNameItems(i));
this.setState({ scanners: sourceNames });
}
});
this.loadDWT();
}
loadDWT() {
Dynamsoft.DWT.ProductKey = this.props.productKey;
Dynamsoft.DWT.ResourcesPath = "dwt-resources";
Dynamsoft.DWT.Containers = [{ ContainerId: this.containerId, Width: this.width, Height: this.height }];
let checkScriptLoaded = () => {
if (Dynamsoft.Lib.detect.scriptLoaded) {
Dynamsoft.DWT.Load();
} else {
setTimeout(() => {
checkScriptLoaded();
}, 1000);
}
};
checkScriptLoaded();
}
Debido a la carga diferida, es necesario verificar el estado de carga del SDK.
Vamos a crear el diseño de la interfaz de usuario en render() :
render() {
return (
<div style={{ width: "30%", margin: "0 auto" }}>
<select style={{ width: "100%" }} tabIndex="1" value={this.state.currentScanner} onChange={(e) => this.onSourceChange(e.target.value)}>
{
this.state.scanners.length > 0 ?
this.state.scanners.map((_name, _index) =>
<option value={_name} key={_index}>{_name}</option>
)
:
<option value="Looking for devices..">Looking for devices..</option>
}
</select>
<button tabIndex="2" style={{ marginRight: "4%", width: "48%" }}
onClick={() => this.acquireImage()}
disabled={this.state.scanners.length > 0 ? "" : "disabled"}
>Scan</button>
<button tabIndex="3" style={{ margin: "2% 0", width: "48%" }}
onClick={() => this.loadImagesOrPDFs()}
>Load</button>
<div id={this.containerId}></div>
</div >
);
}
Hay dos botones, uno para adquirir imágenes de escáneres de documentos y el otro para cargar imágenes desde el disco duro local. La implementación de código correspondiente del evento de clic de botón es la siguiente:
acquireImage() {
this.DWObject.CloseSource();
for (let i = 0; i < this.DWObject.SourceCount; i++) {
if (this.DWObject.GetSourceNameItems(i) === this.state.currentScanner) {
this.DWObject.SelectSourceByIndex(i);
break;
}
}
this.DWObject.OpenSource();
this.DWObject.AcquireImage();
}
loadImagesOrPDFs() {
this.DWObject.IfShowFileDialog = true;
this.DWObject.Addon.PDF.SetResolution(200);
this.DWObject.Addon.PDF.SetConvertMode(1);
this.DWObject.LoadImageEx("", 5,
() => { },
(errorCode, errorString) => alert(errorString));
}
Una vez que el componente está listo, podemos agregarlo a App.js :
import logo from './logo.svg';
import DWTLogo from './icon-dwt.svg';
import DynamsoftLogo from './logo-dynamsoft-white-159X39.svg';
import './App.css';
import DWT from './DynamsoftSDK';
function App() {
return (
<div className="App">
<header className="App-header">
<a href="https://www.dynamsoft.com/Products/WebTWAIN_Overview.aspx" target="_blank" rel="noopener noreferrer" ><img src={DWTLogo} className="dwt-logo" alt="Dynamic Web TWAIN Logo" /></a>
<div style={{ width: "10px" }}></div>
<a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" ><img src={logo} className="App-logo" alt="logo" /></a>
<div style={{ width: "18%" }}></div>
<a href="https://www.dynamsoft.com" target="_blank" rel="noopener noreferrer" ><img src={DynamsoftLogo} className="ds-logo" alt="Dynamsoft Logo" /></a>
</header>
<main className="App-main">
<DWT
productKey="LICENSE-KEY"
/>
</main>
</div>
);
}
export default App;
Para que el SDK funcione correctamente, debe solicitar una licencia de prueba GRATUITA de 30 días y actualizar la línea:
productKey="LICENSE-KEY"
Ahora, la sencilla aplicación de gestión de documentos web está terminada. Podemos ejecutar npm start para iniciar la aplicación:
npm start
Código fuente
https://github.com/dynamsoft-dwt/dwt-react-simple