CODEWITHSUNDEEP
angularpdfdigital-signature
fcberg
fcberg

Reputation: 774

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?

Upvotes: 1

Views: 11217

Answers (3)

Anass
Anass

Reputation: 321

in my case, im not working with Angular, im just working with a native js code, so i wasnt able to find this part of the code in both of my files "pdf.worker.js" or "pdf.viewer.js".

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

I did solve this problem based on the Ninad Desai comment below. so I searched for the condition where the data.fieldType === "Sig and change the return to display the signatures directly without any condition.

the code before :

return "Sig" === this.data.fieldType
? (K("unimplemented annotation type: Widget signature"), !1)
: a.isViewable.call(this);

the code after :

return a.isViewable.call(this);

I'm not sure if it's the best solution, but at least its working for now!

file name : pdf.worker.js line : 3321

here is an example of what the pdf.js display right now : enter image description here

hope that this comment help u guys...

Upvotes: 0

Ninad Desai
Ninad Desai

Reputation: 567

For me - uncommenting "Sig" condition in pdf.worker.js didnt work. I tried it selveral way - updating the existiing one, Downloading the new worker - changing it and then referencing it in my code. No success.

What worked for me is - below solution. In pdf.worker.js add this on line 19544 - there is a switch case for fieldType i.e. switch (fieldType) if you dont find that in your code - search for below line. The switch case would be above this line

(0, _util.warn)('Unimplemented widget field type "' + fieldType + '", ' + "falling back to base field type.");

Once you locate that switch statement - add below case

case "Sig": return new SquareAnnotation(parameters);

This was a success for me.

Upvotes: 0

Sumali Jayasinghe
Sumali Jayasinghe

Reputation: 116

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';

Upvotes: 7

Related Questions