Downloading pdf from webviewer with digital signature

Technical Support
, , , ,
1

Product:

Product Version: 10.2.3

Please give a brief summary of your issue:
I’m trying to add a digital signature to a pdf and save it with all its annotations and the digital signature. I can sign it do all the annotations I want and then add the digital signature at the end when I want to save it, but the downloaded file doesn’t contain signatures or it has some weird distortion. It will have all the other annotations display correctly but signatures just don’t show up as expected.

Please describe your issue and provide steps to reproduce it:
Code that I’m using to digital sign and download

async function saveDocumentCertified() {
  const { PDFNet, documentViewer, annotationManager } = INSTANCE.Core;
  await PDFNet.initialize();
  const xfdfString = await annotationManager.exportAnnotations({widgets: false, fields: true, links: false});
  await PDFNet.runWithCleanup(async () => {
    const doc = await documentViewer.getDocument().getPDFDoc();
    const fdfDoc = await PDFNet.FDFDoc.createFromXFDF(xfdfString);
    await doc.fdfMerge(fdfDoc);
    await doc.flattenAnnotations(false);

    await doc.initSecurityHandler();
    await doc.lock();

    const page1 = await doc.getPage(1);
    const certification_sig_field = await doc.createDigitalSignatureField("CertSig");
    const widgetAnnot = await PDFNet.SignatureWidget.createWithDigitalSignatureField(doc, new PDFNet.Rect(0, 100, 200, 150), certification_sig_field);
    await page1.annotPushBack(widgetAnnot);

    await certification_sig_field.setDocumentPermissions(PDFNet.DigitalSignatureField.DocumentPermissions.e_no_changes_allowed);
    await certification_sig_field.certifyOnNextSaveFromURL('PATH_TO_PFX', 'PASSWORD');
    await certification_sig_field.setLocation('SOMEWHERE');
    await certification_sig_field.setReason('Document certified.');
    await certification_sig_field.setContactInfo('somewhere contact info');

    // Set permissions
    const securityHandler = await PDFNet.SecurityHandler.createDefault();
    await securityHandler.setPermission(PDFNet.SecurityHandler.Permission.e_doc_modify, false);
    await securityHandler.setPermission(PDFNet.SecurityHandler.Permission.e_assemble_doc, false);
    await doc.setSecurityHandler(securityHandler);

    const docBuffer = await doc.saveMemoryBuffer(PDFNet.SDFDoc.SaveOptions.e_compatibility);
    const docBlob = new Blob([docBuffer], {
      type: 'application/pdf',
    });
    // file-saver package
    saveAs(docBlob, 'output.pdf');
  })
}

How it looks in the web viewer

Selection_046
Selection_046685×866 99.8 KB

How it looks after downloading

Selection_047
Selection_047606×758 80.6 KB

1 Like
2

Thank you for the posting the incident to our forum. We will provide you with an update as soon as possible.

1 Like
3

Hi there,

Thanks for reaching out the WebViewer forums,

Using the provided code, this was the document after calling your function, with a minor change:

      // saveAs(docBlob, 'output.pdf');
      instance.UI.loadDocument(docBlob);

image
image1598×809 223 KB

At this point, we only have a signature widget, and this would not be present in the document when downloaded.
If I sign on the field there, there would be a signature annotation that would be added, i.e.:

image
image1573×773 253 KB

and downloading this document will have the signature correctly present in the document:
On chrome:

image
image1425×847 114 KB

Here is our sample digital signature test guide for reference:

If you are still experiencing issues, could you please share a minimal runnable sample project?

Best regards,
Kevin Kim

1 Like