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.
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
Code snippet
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');
})
})
})