WebViewer is a JavaScript-based PDF SDK for building document functionality in web apps.

Industry
SDK Features

Digital Signatures

clear

For this demo, a digital signature will be applied to the first signature field in the document or an invisible signature field will be added.

Add Digital ID

A default PDFTron Digital ID will be used for this demo if no Digital ID is provided

We encourage using a non-confidential Digital ID file for this demo, but none of the provided data is saved to PDFTron servers.

Select Digital ID file

Clear Digital ID Information

Add Signature Information

Add Approval Signature

Save with Approval Signature

Why add an approval signature?

Add Certification

Save with Certification

Why certify a document?

Code snippet

keyboard_arrow_down

const wvElement = document.getElementById('viewer');
WebViewer({ 
  fullAPI: true,
  ...options 
  }, wvElement)
  .then(instance => {
    const { PDFNet, docViewer } = instance;
    await PDFNet.initialize();
    await PDFNet.runWithCleanup(async () => {
      const doc = await docViewer.getDocument().getPDFDoc();
      doc.lock();
      // Add an StdSignatureHandler instance to PDFDoc, making sure to keep track of it using the ID returned.
      const sigHandlerId = await doc.addStdSignatureHandlerFromURL(cert_file_path, 'password');
      sign() { // approval signature
        // Retrieve the unsigned approval signature field.
        /**
         * Note: Replace approvalFieldName with the field name in the document
         * that is being signed and approved
         */
        const foundApprovalField = await doc.getField(approvalFieldName);
        const approvalSigField = await PDFNet.DigitalSignatureField.createFromField(foundApprovalField);
        // (OPTIONAL) Add an appearance to the signature field.
        const img = await PDFNet.Image.createFromURL(doc, appearance_img_path);
        const approvalSignatureWidget = await PDFNet.SignatureWidget.createWithDigitalSignatureField(doc, await PDFNet.Rect.init(0, 100, 200, 150), approvalSigField);
        await approvalSignatureWidget.createSignatureAppearance(img);
        const page1 = await doc.getPage(1);
        page1.annotPushBack(approvalSignatureWidget);
        // Prepare the signature and signature handler for signing.
        await approvalSigField.signOnNextSaveWithCustomHandler(sigHandlerId);
        // (OPTIONAL) Add more information to the signature dictionary.
        await approvalSigField.setLocation("Vancouver, BC");
        await approvalSigField.setReason("Document approval.");
        await approvalSigField.setContactInfo("www.pdftron.com");
        // The actual approval signing will be done during the following incremental save operation.
        const buf = await doc.saveMemoryBuffer(PDFNet.SDFDoc.SaveOptions.e_incremental);
        const blob = new Blob([buf], { type: 'application/pdf' });
        saveAs(blob, 'signed_doc.pdf');
      }
      certify() { // certification signature
        /**
         * Certifying a document requires a digital signature field (can optionally be
         * hidden), hence why the logic below either looks for an existing field in the
         * document, or suggests creating a field in the document
         */
        // Retrieve the unsigned certification signature field.
        /**
         * Note: Replace certificationFieldName with the field name in the
         * document that is being certified
         */
        const foundCertificationField = await doc.getField(certificationFieldName);
        const certificationSigField = await PDFNet.DigitalSignatureField.createFromField(foundCertificationField);
        // Alternatively, create a new signature form field in the PDFDoc. The name argument is optional;
        // leaving it empty causes it to be auto-generated. However, you may need the name for later.
        // Acrobat doesn't show digsigfield in side panel if it's without a widget. Using a
        // Rect with 0 width and 0 height, or setting the NoPrint/Invisible flags makes it invisible.
        // const certificationSigField = await doc.createDigitalSignatureField(certificationFieldName);
        // (OPTIONAL) Add an appearance to the signature field.
        const img = await PDFNet.Image.createFromURL(doc, appearance_img_path);
        const certifySignatureWidget = await PDFNet.SignatureWidget.createWithDigitalSignatureField(doc, await PDFNet.Rect.init(0, 100, 200, 150), certificationSigField);
        await certifySignatureWidget.createSignatureAppearance(img);
        const page1 = await doc.getPage(1);
        page1.annotPushBack(certifySignatureWidget);
        // Prepare the document locking permission level to be applied upon document certification.
        certificationSigField.setDocumentPermissions(PDFNet.DigitalSignatureField.DocumentPermissions.e_no_changes_allowed);
        
        // Prepare the signature and signature handler for certification.
        await certificationSigField.certifyOnNextSaveWithCustomHandler(sigHandlerId);
        // (OPTIONAL) Add more information to the signature dictionary.
        await certificationSigField.setLocation("Vancouver, BC");
        await certificationSigField.setReason("Document certification.");
        await certificationSigField.setContactInfo("www.pdftron.com");
        // Save the PDFDoc. Once the method below is called, PDFNet will also certify the document using the information provided.
        const buf = await doc.saveMemoryBuffer(PDFNet.SDFDoc.SaveOptions.e_incremental);
        const blob = new Blob([buf], { type: 'application/pdf' });
        saveAs(blob, 'certified_doc.pdf');
      })
    })
  })

WebViewer Demo

Documentation

Download NPM

Contact Sales

button-icon

Choose File

button-icon