> 웹 프론트엔드 > JS 튜토리얼 > HTMLnd JavaScript를 사용하여 PDF 문서에 서명을 삽입하는 방법

HTMLnd JavaScript를 사용하여 PDF 문서에 서명을 삽입하는 방법

Linda Hamilton
풀어 주다: 2024-12-15 06:23:15
원래의
326명이 탐색했습니다.

전자 서명은 개인이 전자적으로 문서에 서명할 수 있는 자필 서명의 디지털 형식입니다. 이는 기업과 조직이 서명 프로세스를 간소화하는 데 필수적인 도구가 되어 전 세계 어디에서나 단 몇 번의 클릭만으로 문서에 서명할 수 있게 되었습니다. 이 기사에서는 HTML5, JavaScript 및 Dynamsoft Document Viewer를 사용하여 PDF 문서에 서명을 삽입하는 방법을 살펴보겠습니다.

데모 비디오: 전자 서명으로 PDF 문서에 서명

온라인 데모

https://yushulx.me/web-document-annotation/

전제 조건

  • Dynamsoft Capture Vision 평가판 라이선스: Dynamsoft 제품의 모든 기능을 활용하려면 30일 무료 평가판 라이선스를 받으세요.

  • Dynamsoft Document Viewer: 이 JavaScript SDK를 사용하면 PDF, JPEG, PNG, 를 원활하게 볼 수 있습니다. TIFFBMP 파일. 또한 PDF 주석 렌더링 및 저장 기능도 있습니다. 다운로드 링크: https://www.npmjs.com/package/dynamsoft-document-viewer.

웹 PDF 편집기의 서명 기능 구현

Dynamsoft Document Viewer로 구축된 당사의 웹 문서 주석 프로젝트는 확장성이 뛰어납니다. 현재 PDF 문서에 대한 바코드 감지가 포함되어 있습니다. 다음 섹션에서는 PDF 문서에 전자 서명을 추가하는 과정을 단계별로 안내합니다.

1단계: 소스 코드 얻기

  1. GitHub 저장소에서 소스 코드를 복제하세요.

    git clone https://github.com/yushulx/web-twain-document-scan-management.git
    
    로그인 후 복사
    로그인 후 복사
  2. document_annotation 디렉토리로 이동하세요:

    cd web-twain-document-scan-management/examples/document_annotation
    
    로그인 후 복사
    로그인 후 복사
  3. Visual Studio Code에서 프로젝트를 엽니다.

2단계: 서명 버튼 추가

  1. main.css에서 서명 버튼에 대한 재질 아이콘을 추가합니다.

    .icon-stylus::before {
        content: "edit";
    }
    
    .icon-stylus {
        display: flex;
        font-size: 1.5em;
    }
    
    
    로그인 후 복사
    로그인 후 복사

    How to Insert Signatures into PDF Documents with HTMLnd JavaScript

  2. 서명 버튼을 정의하고 main.js의 도구 모음에 추가하세요.

    const signatureButton = {
        type: Dynamsoft.DDV.Elements.Button,
        className: "material-icons icon-stylus",
        tooltip: "Sign the document",
        events: {
            click: "sign",
        }
    }
    
    const pcEditViewerUiConfig = {
        type: Dynamsoft.DDV.Elements.Layout,
        flexDirection: "column",
        className: "ddv-edit-viewer-desktop",
        children: [
            {
                type: Dynamsoft.DDV.Elements.Layout,
                className: "ddv-edit-viewer-header-desktop",
                children: [
                    {
                        type: Dynamsoft.DDV.Elements.Layout,
                        children: [
                            Dynamsoft.DDV.Elements.ThumbnailSwitch,
                            Dynamsoft.DDV.Elements.Zoom,
                            Dynamsoft.DDV.Elements.FitMode,
                            Dynamsoft.DDV.Elements.Crop,
                            Dynamsoft.DDV.Elements.Filter,
                            Dynamsoft.DDV.Elements.Undo,
                            Dynamsoft.DDV.Elements.Redo,
                            Dynamsoft.DDV.Elements.DeleteCurrent,
                            Dynamsoft.DDV.Elements.DeleteAll,
                            Dynamsoft.DDV.Elements.Pan,
                            Dynamsoft.DDV.Elements.AnnotationSet,
                            qrButton,
                            checkButton,
                            scanButton,
                            clearButton,
                            signatureButton,
                        ],
                    },
                    {
                        type: Dynamsoft.DDV.Elements.Layout,
                        children: [
                            {
                                type: Dynamsoft.DDV.Elements.Pagination,
                                className: "ddv-edit-viewer-pagination-desktop",
                            },
                            loadButton,
                            downloadButton,
                        ],
                    },
                ],
            },
            Dynamsoft.DDV.Elements.MainView,
        ],
    };
    
    로그인 후 복사
    로그인 후 복사
  3. 서명 버튼에 대한 클릭 이벤트 핸들러를 추가합니다.

    editViewer.on("sign", sign);
    
    function sign() {
        ...
    }
    
    로그인 후 복사
    로그인 후 복사

3단계: 서명 입력을 위한 팝업 대화 상자 만들기

서명 입력 팝업 대화 상자에는 다음 요소가 포함됩니다.

  • 서명을 그리기 위한 캔버스 요소입니다.
  • 시그니처 색상 변경을 위한 색상 옵션
  • 시그니처 두께를 조정하는 획 슬라이더
  • 서명 위치를 지정하기 위한 X 및 Y 좌표입니다.
  • PDF 문서에 서명을 삽입하는 저장 버튼입니다.
  • 대화상자를 닫는 취소 버튼입니다.
  • 서명을 지울 수 있는 다시 그리기 버튼

HTML 코드

git clone https://github.com/yushulx/web-twain-document-scan-management.git
로그인 후 복사
로그인 후 복사
  • 마우스 이벤트에 대한 이벤트 리스너 추가:

    cd web-twain-document-scan-management/examples/document_annotation
    
    로그인 후 복사
    로그인 후 복사
  • 색상 및 획 옵션에 대한 이벤트 리스너 추가:

    .icon-stylus::before {
        content: "edit";
    }
    
    .icon-stylus {
        display: flex;
        font-size: 1.5em;
    }
    
    
    로그인 후 복사
    로그인 후 복사
  • 그리기 기능 구현:

    const signatureButton = {
        type: Dynamsoft.DDV.Elements.Button,
        className: "material-icons icon-stylus",
        tooltip: "Sign the document",
        events: {
            click: "sign",
        }
    }
    
    const pcEditViewerUiConfig = {
        type: Dynamsoft.DDV.Elements.Layout,
        flexDirection: "column",
        className: "ddv-edit-viewer-desktop",
        children: [
            {
                type: Dynamsoft.DDV.Elements.Layout,
                className: "ddv-edit-viewer-header-desktop",
                children: [
                    {
                        type: Dynamsoft.DDV.Elements.Layout,
                        children: [
                            Dynamsoft.DDV.Elements.ThumbnailSwitch,
                            Dynamsoft.DDV.Elements.Zoom,
                            Dynamsoft.DDV.Elements.FitMode,
                            Dynamsoft.DDV.Elements.Crop,
                            Dynamsoft.DDV.Elements.Filter,
                            Dynamsoft.DDV.Elements.Undo,
                            Dynamsoft.DDV.Elements.Redo,
                            Dynamsoft.DDV.Elements.DeleteCurrent,
                            Dynamsoft.DDV.Elements.DeleteAll,
                            Dynamsoft.DDV.Elements.Pan,
                            Dynamsoft.DDV.Elements.AnnotationSet,
                            qrButton,
                            checkButton,
                            scanButton,
                            clearButton,
                            signatureButton,
                        ],
                    },
                    {
                        type: Dynamsoft.DDV.Elements.Layout,
                        children: [
                            {
                                type: Dynamsoft.DDV.Elements.Pagination,
                                className: "ddv-edit-viewer-pagination-desktop",
                            },
                            loadButton,
                            downloadButton,
                        ],
                    },
                ],
            },
            Dynamsoft.DDV.Elements.MainView,
        ],
    };
    
    로그인 후 복사
    로그인 후 복사

    모든 경로는 DrawingHistory 배열에 저장됩니다. redrawCanvas 함수는 배열을 반복하고 캔버스에 경로를 다시 그립니다.

  • 확인, 다시 그리기 및 취소 버튼에 대한 이벤트 리스너를 추가합니다.

    editViewer.on("sign", sign);
    
    function sign() {
        ...
    }
    
    로그인 후 복사
    로그인 후 복사
  • 4단계: 문서에 서명 삽입

    PDF 문서에 서명을 삽입하려면:

    1. 캔버스를 블롭으로 변환:

      <div>
      
      
      
      <p><img src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg" alt="How to Insert Signatures into PDF Documents with HTMLnd JavaScript" /></p>
      
      <p><strong>JavaScript code for the signature input dialog</strong></p>
      
      <ol>
      <li>
      <p>Initialize the canvas and drawing context:<br>
      </p>
      <pre class="brush:php;toolbar:false">let canvas = document.getElementById("signatureCanvas");
      let ctx = canvas.getContext("2d");
      let isDrawing = false;
      let color = "black"; 
      let strokeWidth = 3;  
      let drawingHistory = []; 
      canvas.width = 500;
      canvas.height = 300;
      
      로그인 후 복사
    2. 현재 페이지 ID 및 페이지 데이터 가져오기:

      canvas.addEventListener("mousedown", startDrawing);
      canvas.addEventListener("mousemove", draw);
      canvas.addEventListener("mouseup", stopDrawing);
      canvas.addEventListener("mouseout", stopDrawing);
      
      로그인 후 복사
    3. 서명 이미지로 새 스탬프 주석 만들기:

      document.getElementById("blue").addEventListener("click", () => {
          color = "blue";
          redrawCanvas();
      });
      
      document.getElementById("red").addEventListener("click", () => {
          color = "red";
          redrawCanvas();
      });
      
      document.getElementById("black").addEventListener("click", () => {
          color = "black";
          redrawCanvas();
      });
      
      document.getElementById("strokeSlider").addEventListener("input", (e) => {
          strokeWidth = e.target.value;
          redrawCanvas();
      });
      
      로그인 후 복사

      How to Insert Signatures into PDF Documents with HTMLnd JavaScript

    소스 코드

    https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation

    위 내용은 HTMLnd JavaScript를 사용하여 PDF 문서에 서명을 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    원천:dev.to
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿