首頁 > web前端 > 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 試用許可證:取得 30 天免費試用許可證以解鎖 Dynamsoft 產品的全部功能。

  • Dynamsoft 文件檢視器:此JavaScript SDK 可無縫檢視PDFJPEGPNG > TIFFBMP 檔。它還具有 PDF 註釋渲染和保存功能。下載連結:https://www.npmjs.com/package/dynamsoft-document-viewer。

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

我們的 Web 文件註解項目是使用 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
    作者最新文章
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板