在當(dāng)今的數(shù)字時(shí)代，高效的文檔管理對(duì)于企業(yè)和個(gè)人都至關(guān)重要。將文檔掃描功能直接集成到 Web 應(yīng)用程序中可以顯著簡(jiǎn)化工作流程，使用戶能夠輕松地?cái)?shù)字化和管理文檔。在本教程中，我們將探討如何利用Dynamic Web TWAIN SDK的強(qiáng)大功能來(lái)創(chuàng)建基于 React 的文檔掃描 Web 應(yīng)用程序。本指南將引導(dǎo)您完成設(shè)置React項(xiàng)目、集成 SDK 以及實(shí)現(xiàn)功能的過(guò)程，使用戶能夠在用戶友好的 Web 界面中掃描、上傳和管理文檔。

點(diǎn)擊下載Dynamsoft Web TWAIN最新版

先決條件

• Node.js
• React
• Dynamic Web TWAIN 試用許可

構(gòu)建 React 文檔掃描 Web 應(yīng)用程序的步驟

在以下部分中，我們將首先創(chuàng)建 React 項(xiàng)目的基礎(chǔ)結(jié)構(gòu)，然后無(wú)縫集成動(dòng)態(tài) Web TWAIN SDK 以實(shí)現(xiàn)強(qiáng)大的文檔掃描和管理功能。

• 開始新的 React 項(xiàng)目

要?jiǎng)?chuàng)建新的 React 項(xiàng)目，請(qǐng)選擇以下方法之一：

• 使用 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 包含用于掃描儀通信的平臺(tái)特定服務(wù)應(yīng)用程序和 JavaScript 庫(kù)，位于node_modules/dwt/dist文件夾中。使用ncp這些資源將這些資源復(fù)制到public您的 React 項(xiàng)目的文件夾中：

ncp node_modules/dwt/dist public/dwt-resources

接下來(lái)，在中創(chuàng)建一個(gè) 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：管理文檔掃描過(guò)程。
• loadImagesOrPDFs：允許用戶從本地文件系統(tǒng)加載圖像或 PDF。

將組件集成到 App.js

一旦你的組件準(zhǔn)備好了，就將其集成到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;

運(yùn)行應(yīng)用程序

現(xiàn)在一切都已設(shè)置完畢，請(qǐng)使用以下命令運(yùn)行該應(yīng)用程序：

npm start

這將在您的默認(rèn) Web 瀏覽器中啟動(dòng)該應(yīng)用程序，從而可以直接在您的 React 應(yīng)用程序中掃描和管理文檔。

獲取更多產(chǎn)品資訊或產(chǎn)品試用及優(yōu)惠，請(qǐng)聯(lián)系