Search code examples
angularpdfdigital-signature

Preview PDF file with e-signature in Angular

I'm using pdf-viewer on the frontend with Angular 8. When my backend (in NodeJS) signs the PDF using a third-party service, the returned PDF contains the e-signature in an additional page at the end of the document.

If I download the document to my computer, I can see that the signature is OK. But when trying to preview it using pdf-viewer, it does not show the e-signature. It shows the additional page (where the signature was supposed to be) but only a blank page.

Example here:

https://drive.google.com/open?id=1f6pB6iqi6BwxzGOxv_Rxehc1TFFDEed8

I have tried to use the direct URL to the file:

<pdf-viewer *ngIf="file" [src]="file.url" [render-text]="false" style="display: block;"></pdf-viewer>

And also I tried to download the file on the backend, convert it to base64:

<pdf-viewer *ngIf="file" [src]="file.base64" [render-text]="false" style="display: block;"></pdf-viewer>

Nothing shows the signature.

When using the URL, the console shows a warning message: "Warning: Unimplemented widget field type "Sig", falling back to base field type."

Any idea about how can I show the document with the e-signature?

Solution

  • download the pdf.worker.js https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.js and remove these lines

    // Hide unsupported Widget signatures.
if (data.fieldType === 'Sig') {
    data.fieldValue = null;
    _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}

    put the edited pdf.worker.js inside your project and update the code as follows, you have to set these line before pdf-viewer component is rendered

    (<any>window).pdfWorkerSrc = '<path_to_file>/pdf.worker.js';

    For example:

    (<any>window).pdfWorkerSrc = '/assets/lib/pdf.worker.js';