在當今的數字時代，高效的文檔管理對于企業和個人都至關重要。將文檔掃描功能直接集成到 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 項目

要創建新的 React 項目，請選擇以下方法之一：

• 使用 npm：

 npm install -g create-react-app
  create-react-app document-scan

• 使用 npx：

 npx create-react-app document-scan

• 使用Yarn：

 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 應用程序中掃描和管理文檔。

獲取更多產品資訊或產品試用及優惠，請聯系