永利最大(官方)网站

在当今的数字时代，高效的文档管理对于企业和个人都至关重要。将文档扫描功能直接集成到 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 href="//www.dynamsoft.com/web-twain/overview/" target="_blank" rel="noopener noreferrer" ><img src={DWTLogo} className="dwt-logo" alt="Dynamic Web TWAIN Logo" /></a>
        <div style={{ width: "10px" }}></div>
        <a href="//reactjs.org/" target="_blank" rel="noopener noreferrer" ><img src={logo} className="App-logo" alt="logo" /></a>
        <div style={{ width: "18%" }}></div>
        <a href="//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;

运行应用程序

现在一切都已设置完毕，请使用以下命令运行该应用程序：

npm start

 这将在您的默认 Web 浏览器中启动该应用程序，从而可以直接在您的 React 应用程序中扫描和管理文档。

获取更多产品资讯或产品试用及优惠，请联系