Pre-signed PDF in adobe, no signature showing

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7

Detailed description of issue
Adobe Digital Signature not showing, for the life of me I can’t get a PDF already signed in adobe to display correctly.

Expected behaviour
To not have an existing Adobe signature hidden

Does your issue happen with every document, or just one?
Every document

Link to document
2021 Questionnaire_fillable_signedasdf.pdf (152.5 KB)

Hi there,

Opening this PDF in Adobe, I can see the following message.

It seems like the document may not have been signed properly. I am also unable to see a signature in Adobe.

Best Regards,
Darian

Weird I opened that exact document and on the bottom I have the signature
image

Hi there,

Apologies, I am able to see that the document is digitally signed on our demo, but it is still asking for a signature. I have submitted a report about this issue.

image

Best Regards,
Darian

Darian,

Thanks for submitting that, is there anything specific to do in the code to get the Adobe signature to appear? In my application I don’t get the Adobe Signature just the ‘sign here’ for that PDF.

  • Justin

That is odd. Are you able to see the signature on our demo site here? PDF.js Viewer Demo | PDF.js Express

Yep, just retested and I can see the signature, in the demo that is.

Could you provide any relevant code snippets that could be causing this issue? We are unable to reproduce this issue in our sample project. Are you getting any console error messages?

  self.instance = instance;

  instance.UI.setHeaderItems((header) => {
    const items = header.getItems();
    items.splice(7, 1);
    header.update(items);

    let defaultHeader = header.headers.default;
    defaultHeader.push({
      img: "icon-header-full-screen",
      index: -1,
      type: "actionButton",
      element: 'fullScreenButton',
      hidden: [ 'mobile' ],
      onClick: () => {
        instance.UI.toggleFullScreen()
      }
    });

    defaultHeader.splice(7, 0, {
      type: 'divider'
    });

    defaultHeader.splice(7, 0, {
      "type": "actionButton",
      //"toolGroup": "signatureTools",
      img: '../../../sign.svg',
      "dataElement": "signatureToolGroupButton",
      "title": "annotation.signature",
      onClick: () => {
        instance.UI.openElement("signatureModal");
      },
    });

    defaultHeader.splice(7, 0, {
      "type": "toolGroupButton",
      "toolGroup": "freeTextTools",
      "dataElement": "freeTextToolGroupButton",
      "title": "annotation.freetext"
    });

    instance.UI.setToolbarGroup('toolbarGroup-View');
    if (!self.isViewOnly) {
      //instance.UI.setToolbarGroup('toolbarGroup-FillAndSign');
    }
    //console.log("Default header: " + JSON.stringify(defaultHeader));
  });

  instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
    self.$emit("updatePdfDirtyFlag", false);
    self.configurePdfViewerSettings(instance);
  });

  let updateFieldChanged = (field, value) => {
    self.pdfFormDirty = true;
    if (!self.isViewOnly) {
      self.$emit("updatePdfDirtyFlag", true);
    }
  };

  let updateAnnotationChanged = (annotations, action, e) => {
    self.pdfFormDirty = true;
    if (!e.imported) {
      if (!self.isViewOnly) {
        self.$emit("updatePdfDirtyFlag", true);
      }

      if (annotations.length > 0 && annotations[0].Subject === "Signature") {
        self.signatureChanged = true;
      }
    }
  };

  instance.Core.documentViewer.addEventListener('annotationsLoaded', async () => {
    //instance.Core.annotationManager.enableReadOnlyMode();
    instance.setLayoutMode(instance.LayoutMode.Continuous);
    instance.setToolMode('Pan');
    const signatureWidgetAnnots = instance.Core.annotationManager.getAnnotationsList().filter(
        annot => annot instanceof instance.Core.Annotations.SignatureWidgetAnnotation
    )
    signatureWidgetAnnots.forEach((widget) => {
      const isSigned = widget.isSignedDigitally();
      if (isSigned) {
        console.log('is signed')
      } else {
        // if this signature field is not signed initially
        console.log("is not signed");
        //instance.Core.annotationManager.deleteAnnotations([widget]);
      }
    });
    if (self.xfdfOverride) {
      let annots = instance.Core.annotationManager.getAnnotationsList();

      instance.Core.annotationManager.removeEventListener('fieldChanged', updateFieldChanged);
      instance.Core.annotationManager.removeEventListener('annotationChanged', updateAnnotationChanged);
      //instance.Core.annotationManager.removeEventListener('annotationsDrawn', updateDrawingMade);

      // remove annotations
      instance.Core.annotationManager.deleteAnnotations(annots, {force: true});
      instance.Core.annotationManager.importAnnotations(self.xfdfOverride).then(importedAnnotations => {
        console.log("Override with saved FDF annotations.");
        instance.Core.annotationManager.addEventListener('fieldChanged', updateFieldChanged);
        instance.Core.annotationManager.addEventListener('annotationChanged', updateAnnotationChanged);`Preformatted text`
      });

      if (self.isViewOnly) {
        instance.Core.annotationManager.enableReadOnlyMode();
      }
    } else {
      instance.Core.annotationManager.addEventListener('fieldChanged', updateFieldChanged);
      instance.Core.annotationManager.addEventListener('annotationChanged', updateAnnotationChanged);
    }
  });
});

Above is the code when when the viewer is loaded. Please note that specifically for testing right now the following are always false :

self.xfdfOverride
self.isViewOnly

We are adding event listeners and adjusting the UI but nothing really outside of that. Worth noting when i call the widget.isSignedDigitally() on the signature it does return true, although I can’t see the signature.

Hi there,

I tried using the above code on my own project, but I am able to see the signature like on our demo. Please let me know of any steps I may be missing.

Best Regards,
Darian

Darian would you be able to give me access to that sample project? I’m super curious as to why ours is not showing.

I deleted node_modules and the dist folder and reran just to be sure nothing funky was happening but I still cannot see the signature.

they only 2 outstanding I see from the log are these if that helps at all :

You can download a sample project on our site. PDF.js Express Documentation
Just select the download button at the top.

I am placing the code in the viewing.js file.

Darian,

Thanks I found the culprit! I don’t know why I didn’t try to flip the flag earlier…

Its was the disableFlattenedAnnotations set to true. If it’s set to false it shows up.

PDFJSExpress({
path: ‘/public/pdfjsexpress’,
licenseKey: ‘-------------’,
disableFlattenedAnnotations: false,
isReadOnly: self.isViewOnly,
initialDoc: self.docUrl && self.docUrl !== ‘’ ? self.docUrl : undefined,
disabledElements: [
“fileAttachmentToolGroupButton”,
“linkButton”,
“calibrateButton”,
“stampToolGroupButton”,
“polygonCloudToolGroupButton”
]

Thanks so much for the troubleshooting, I appreciate it.

Worth noting as I saw it in the other posts, the bug still exists where the “Sign Here” overlaps the digital signature. I am just deleting that widget when that annotation returns true on the isSignedDigitally function

I would like to get your take on the ‘undefined function : 32’ in the pdf worker though.

  • Justin
1 Like