在 Angular 中使用电子签名预览 PDF 文件 [英] Preview PDF file with e-signature in Angular

问题描述

我在 Angular 8 的前端使用 pdf-viewer. 当我的后端(在 NodeJS 中)使用第三方服务对 PDF 进行签名时，返回的 PDF 在文档末尾的附加页面中包含电子签名.

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.

如果我把文档下载到我的电脑上，我可以看到签名是好的.但是当尝试使用 pdf-viewer 预览它时，它不显示电子签名.它显示了额外的页面(签名应该在的地方)但只有一个空白页.

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.

示例:

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

我尝试使用文件的直接 URL:

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>

我还尝试在后端下载文件，将其转换为 base64:

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>

没有显示签名.

使用 URL 时，控制台会显示一条警告消息:警告:未实现的小部件字段类型Sig"，回退到基本字段类型."

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?

推荐答案

下载 pdf.worker.js https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.js 和 删除这些行

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

将编辑好的pdf.worker.js放入你的项目中并更新如下代码，你必须在渲染pdf-viewer组件之前设置这些行

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

例如:

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

这篇关于在 Angular 中使用电子签名预览 PDF 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！