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

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

Linda Hamilton원래의: 2024-12-15 06:23:15331검색

전자 서명은 개인이 전자적으로 문서에 서명할 수 있는 자필 서명의 디지털 형식입니다. 이는 기업과 조직이 서명 프로세스를 간소화하는 데 필수적인 도구가 되어 전 세계 어디에서나 단 몇 번의 클릭만으로 문서에 서명할 수 있게 되었습니다. 이 기사에서는 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, 를 원활하게 볼 수 있습니다. TIFF 및 BMP 파일. 또한 PDF 주석 렌더링 및 저장 기능도 있습니다. 다운로드 링크: https://www.npmjs.com/package/dynamsoft-document-viewer.

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

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

1단계: 소스 코드 얻기

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

git clone https://github.com/yushulx/web-twain-document-scan-management.git

document_annotation 디렉토리로 이동하세요:

cd web-twain-document-scan-management/examples/document_annotation

Visual Studio Code에서 프로젝트를 엽니다.

2단계: 서명 버튼 추가

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

서명 버튼을 정의하고 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,
    ],
};

서명 버튼에 대한 클릭 이벤트 핸들러를 추가합니다.
```
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 문서에 서명을 삽입하려면:

캔버스를 블롭으로 변환:

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

현재 페이지 ID 및 페이지 데이터 가져오기:

canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);

서명 이미지로 새 스탬프 주석 만들기:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 css html Array define for Directory using Event JS function this canvas input github visual studio visual studio code https

성명：

이전 기사：JavaScript를 사용하여 텍스트 입력에서 Enter 키를 눌러 버튼 클릭을 트리거하려면 어떻게 해야 합니까?다음 기사：JavaScript를 사용하여 텍스트 입력에서 Enter 키를 눌러 버튼 클릭을 트리거하려면 어떻게 해야 합니까?