首頁 >web前端 >js教程 >如何使用 HTMLnd JavaScript 將簽名插入 PDF 文檔

如何使用 HTMLnd JavaScript 將簽名插入 PDF 文檔

Linda Hamilton原創: 2024-12-15 06:23:15328瀏覽

電子簽名是手寫簽名的數位形式，允許個人以電子方式簽署文件。它已成為企業和組織簡化簽名流程的重要工具，只需在世界任何地方單擊幾下即可簽署文件。在本文中，我們將探討如何使用 HTML5、JavaScript 和 Dynamsoft Document Viewer 將簽章插入 PDF 文件。

示範影片：使用電子簽名簽署 PDF 文檔

線上示範

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

先決條件

Dynamsoft Capture Vision 試用許可證：取得 30 天免費試用許可證以解鎖 Dynamsoft 產品的全部功能。
Dynamsoft 文件檢視器：此JavaScript SDK 可無縫檢視PDF、JPEG、PNG、 > TIFF 和BMP 檔。它還具有 PDF 註釋渲染和保存功能。下載連結：https://www.npmjs.com/package/dynamsoft-document-viewer。

實作Web PDF編輯器的簽章功能

我們的 Web 文件註解項目是使用 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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用 JavaScript 在文字輸入中按下 Enter 鍵來觸發按鈕點擊？下一篇：如何使用 JavaScript 在文字輸入中按下 Enter 鍵來觸發按鈕點擊？

看更多