Cara Memasukkan Tandatangan ke dalam Dokumen PDF dengan HTMLnd JavaScript

Tandatangan elektronik ialah bentuk digital tandatangan tulisan tangan yang membolehkan individu menandatangani dokumen secara elektronik. Ia telah menjadi alat penting untuk perniagaan dan organisasi untuk menyelaraskan proses menandatangani, membolehkan dokumen ditandatangani dengan hanya beberapa klik dari mana-mana sahaja di dunia. Dalam artikel ini, kami akan meneroka cara memasukkan tandatangan ke dalam dokumen PDF menggunakan HTML5, JavaScript dan Dynamsoft Document Viewer.

Video Demo: Tandatangani Dokumen PDF dengan Tandatangan Elektronik

Demo Dalam Talian

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

Prasyarat

• Lesen Percubaan Dynamsoft Capture Vision: Dapatkan lesen percubaan percuma selama 30 hari untuk membuka kunci keupayaan penuh Produk Dynamsoft.

• Dynamsoft Document Viewer: SDK JavaScript ini membolehkan paparan lancar PDF, JPEG, PNG, TIFF, dan Fail BMP. Ia juga menampilkan pemaparan dan penjimatan anotasi PDF. Muat turun pautan: https://www.npmjs.com/package/dynamsoft-document-viewer.

Melaksanakan Fungsi Tandatangan untuk Editor PDF Web

Projek anotasi dokumen web kami, dibina dengan Dynamsoft Document Viewer, sangat boleh dikembangkan. Ia pada masa ini termasuk pengesanan kod bar untuk dokumen PDF. Dalam bahagian berikut, kami akan membimbing anda melalui proses menambah tandatangan elektronik pada dokumen PDF langkah demi langkah.

Langkah 1: Dapatkan Kod Sumber

1. Klon kod sumber daripada repositori GitHub:
   

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

2. Navigasi ke direktori document_annotation:
   

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

3. Buka projek dalam Kod Visual Studio.

Langkah 2: Tambah Butang Tandatangan

1. Dalam main.css, tambahkan ikon bahan untuk butang tandatangan:
   

   .icon-stylus::before {
       content: "edit";
   }
   
   .icon-stylus {
       display: flex;
       font-size: 1.5em;
   }
   
   

   

2. Tentukan butang tandatangan dan tambahkannya pada bar alat dalam 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. Tambah pengendali acara klik untuk butang tandatangan:
   

   editViewer.on("sign", sign);
   
   function sign() {
       ...
   }
   

Langkah 3: Cipta Dialog Pop Timbul untuk Input Tandatangan

Dialog pop timbul untuk input tandatangan termasuk elemen berikut:

• Elemen kanvas untuk melukis tandatangan.
• Pilihan warna untuk menukar warna tandatangan.
• Gelangsar lejang untuk melaraskan ketebalan tandatangan.
• Koordinat X dan Y untuk meletakkan tandatangan.
• Butang simpan untuk memasukkan tandatangan ke dalam dokumen PDF.
• Butang batal untuk menutup dialog.
• Butang lukis semula untuk memadamkan tandatangan.

Kod HTML

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

Tambahkan pendengar acara untuk acara tetikus:

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

Tambahkan pendengar acara untuk pilihan warna dan strok:

.icon-stylus::before {
    content: "edit";
}

.icon-stylus {
    display: flex;
    font-size: 1.5em;
}

Laksanakan fungsi lukisan:

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,
    ],
};

Semua laluan disimpan dalam tatasusunan drawingHistory. Fungsi redrawCanvas berulang melalui tatasusunan dan melukis semula laluan pada kanvas.

Tambahkan pendengar acara untuk butang OK, Lukis Semula dan Batal:

editViewer.on("sign", sign);

function sign() {
    ...
}

Langkah 4: Masukkan Tandatangan ke dalam Dokumen

Untuk memasukkan tandatangan ke dalam dokumen PDF:

1. Tukarkan kanvas kepada gumpalan:
   

   <div>
   
   
   
   <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg?x-oss-process=image/resize,p_40" class="lazy" 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. Dapatkan ID halaman semasa dan data halaman:
   

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

3. Buat anotasi setem baharu dengan imej tandatangan:
   

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

   

Kod Sumber

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