在當今的數字時代，高效的文檔管理對于企業和個人都至關重要。將文檔掃描功能直接集成到 Web 應用程序中可以顯著簡化工作流程，使用戶能夠輕松地數字化和管理文檔。在本教程中，我們將探討如何利用Dynamic Web TWAIN SDK的強大功能來創建基于 React 的文檔掃描 Web 應用程序。本指南將引導您完成設置React項目、集成 SDK 以及實現功能的過程，使用戶能夠在用戶友好的 Web 界面中掃描、上傳和管理文檔。
點擊下載Dynamsoft Web TWAIN最新版
先決條件
-
Node.js
-
React
-
Dynamic Web TWAIN 試用許可
構建 React 文檔掃描 Web 應用程序的步驟
在以下部分中，我們將首先創建 React 項目的基礎結構，然后無縫集成動態 Web TWAIN SDK 以實現強大的文檔掃描和管理功能。
要創建新的 React 項目，請選擇以下方法之一：
npm install -g create-react-app
create-react-app document-scan
npx create-react-app document-scan
yarn create react-app document-scan
將文檔掃描與 Dynamic Web TWAIN SDK 集成
首先，安裝所需的軟件包：
npm install dwt@latest
npm install @babel/core @babel/preset-env
npm i ncp -g
Dynamic Web TWAIN SDK 包含用于掃描儀通信的平臺特定服務應用程序和 JavaScript 庫，位于node_modules/dwt/dist文件夾中。使用ncp這些資源將這些資源復制到public您的 React 項目的文件夾中：
ncp node_modules/dwt/dist public/dwt-resources
接下來，在中創建一個 React 組件DynamsoftSDK.js：
import React from 'react';
import Dynamsoft from 'dwt';
export default class DWT extends React.Component {
constructor(props) {
super(props);
this.state = {
sourceList: [],
scanners: [],
currentScanner: "Looking for devices.."
};
this.selectRef = React.createRef();
}
DWObject = null;
containerId = 'dwtcontrolContainer';
width = "100%";
height = "600";
componentDidMount() {
Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => {
this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
if (this.DWObject) {
this.DWObject.GetDevicesAsync(Dynamsoft.DWT.EnumDWT_DeviceType.TWAINSCANNER | Dynamsoft.DWT.EnumDWT_DeviceType.TWAINX64SCANNER).then((sources) => {
const sourceNames = sources.map(source => source.displayName);
this.setState({ scanners: sourceNames, sourceList: sources });
}).catch((error) => {
console.error("Error fetching devices:", error);
});
}
});
this.loadDWT();
}
loadDWT() {
Dynamsoft.DWT.ResourcesPath = "dwt-resources";
Dynamsoft.DWT.ProductKey = 'DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==';
Dynamsoft.DWT.Containers = [{ ContainerId: this.containerId, Width: this.width, Height: this.height }];
Dynamsoft.DWT.Load();
}
onSourceChange(value) {
this.setState({ currentScanner: value });
}
getSelectedIndex = () => {
const selectedIndex = this.selectRef.current.selectedIndex;
console.log("Selected Index:", selectedIndex);
return selectedIndex
}
acquireImage() {
const selectedIndex = this.selectRef.current.selectedIndex;
if (!this.state.sourceList || this.state.sourceList.length === 0) {
alert("No scanner detected. Please connect a scanner and try again.");
return;
}
this.DWObject.IfShowUI = false;
this.DWObject.SelectDeviceAsync(this.state.sourceList[selectedIndex]).then(() => {
return this.DWObject.OpenSourceAsync()
}).then(() => {
return this.DWObject.AcquireImageAsync({
IfDisableSourceAfterAcquire: true
})
}).then(() => {
if (this.DWObject) {
this.DWObject.CloseSource();
}
})
.catch(
(e) => {
console.error(e)
}
)
}
loadImagesOrPDFs() {
this.DWObject.IfShowFileDialog = true;
this.DWObject.Addon.PDF.SetResolution(200);
this.DWObject.Addon.PDF.SetConvertMode(1/*Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL*/);
this.DWObject.LoadImageEx("", 5 /*Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL*/,
() => { },
(errorCode, errorString) => alert(errorString));
}
render() {
return (
<div style={{ width: "30%", margin: "0 auto" }}>
<select ref={this.selectRef} 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()}
disabled={this.state.scanners.length > 0 ? "" : "disabled"}
>Load</button>
<div id={this.containerId}></div>
</div >
);
}
}
解釋
-
Dynamsoft.DWT.ResourcesPath：指定資源文件夾的路徑，位于公共目錄中。
-
Dynamsoft.DWT.ProductKey：您的 Dynamic Web TWAIN SDK 許可證密鑰。
-
onSourceChange：處理所選掃描儀中的變化。
-
acquireImage：管理文檔掃描過程。
-
loadImagesOrPDFs：允許用戶從本地文件系統加載圖像或 PDF。
將組件集成到 App.js
一旦你的組件準備好了，就將其集成到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 target="_blank" rel="noopener noreferrer" ><img src={DWTLogo} className="dwt-logo" alt="Dynamic Web TWAIN Logo" /></a>
<div style={{ width: "10px" }}></div>
<a target="_blank" rel="noopener noreferrer" ><img src={logo} className="App-logo" alt="logo" /></a>
<div style={{ width: "18%" }}></div>
<a 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;
運行應用程序
現在一切都已設置完畢，請使用以下命令運行該應用程序：
npm start
這將在您的默認 Web 瀏覽器中啟動該應用程序，從而可以直接在您的 React 應用程序中掃描和管理文檔。
獲取更多產品資訊或產品試用及優惠，請聯系
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：慧都網
金喜正規買球 
23次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線