React 개발: 웹 문서 관리 앱

Dynamic Web TWAIN은 문서 스캔 및 문서 관리용으로 설계된 JavaScript 라이브러리입니다. 이 튜토리얼은 React 개발을 안내합니다. Reactjs와 Dynamic Web TWAIN을 결합하여 문서 스캐너에서 이미지를 획득하고 로컬 하드 드라이브에서 이미지를 로드할 수 있는 간단한 웹 애플리케이션을 구축하는 방법을 볼 수 있습니다.

Dynamic Web TWAIN에 대해 알아야 할 사항

React를 사용하여 웹 문서 관리 앱 만들기

다음 단락에서는 먼저 React 프로젝트의 골격을 만든 다음 Dynamic Web TWAIN을 프로젝트에 통합하여 문서 스캔 및 관리를 구현합니다.

새로운 React 프로젝트 시작하기

새 React 프로젝트를 생성하려면 다음 방법 중 하나를 선택할 수 있습니다.

npm

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

npx

npx create-react-app document-scan

실

yarn create react-app document-scan

Dynamic Web TWAIN SDK로 문서 스캔 구현

npm 명령을 통해 종속 패키지를 설치합니다.

npm install [email protected]
npm install @babel/core @babel/preset-env
npm i ncp -g

Dynamic Web TWAIN SDK는 플랫폼별 서비스 애플리케이션(스캐너 통신용)과 JavaScript 라이브러리 파일로 구성되며 프로그래밍 및 배포를 위해 node_modules/dwt/dist 폴더에 있습니다. ncp를 사용하여 리소스를 React 프로젝트의 public 폴더에 복사합니다.

ncp node_modules/dwt/dist public/dwt-resources

다음 단계는 DynamsoftSDK.js에서 React 구성 요소를 만드는 것입니다.

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 (

        );
    }
}

componentDidMount()에서 Dynamic Web TWAIN 개체를 초기화하기 위한 리소스 경로를 설정합니다. OnWebTwainReady 이벤트가 트리거되면 연결된 문서 스캐너의 정보를 가져온 다음 관련 UI 요소를 업데이트할 수 있습니다.

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();
}

레이지 로딩 때문에 SDK 로딩 상태 확인이 필요합니다.
render()에서 UI 레이아웃을 만들어 보겠습니다.

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 >
    );
}

두 개의 버튼이 있습니다. 하나는 문서 스캐너에서 이미지를 가져오기 위한 것이고 다른 하나는 로컬 하드 드라이브에서 이미지를 로드하기 위한 것입니다. 버튼 클릭 이벤트의 해당 코드 구현은 다음과 같습니다.

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));
}

구성 요소가 준비되면 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;

SDK가 성공적으로 작동하도록 하려면 30-day FREE trial license을 신청하고 라인을 업데이트해야 합니다.

productKey="LICENSE-KEY"

이제 간단한 웹 문서 관리 앱이 완성되었습니다. npm start를 실행하여 앱을 실행할 수 있습니다.

npm start

소스 코드

https://github.com/dynamsoft-dwt/dwt-react-simple