在 Angular 中预览带有电子签名的 PDF 文件

Question

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

如果我把文档下载到我的电脑上，我可以看到签名是OK的。但是当尝试使用 pdf-viewer 预览它时，它不显示电子签名。它显示附加页（签名应该在的位置）但只有空白页。

此处示例：

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

我试过使用直接 URL 到文件:

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

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

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

没有显示签名。

使用 URL 时，控制台会显示一条警告消息："Warning: Unimplemented widget field type "Sig"，回落到基本字段类型。"

知道如何显示带有电子签名的文档吗？

Answer 1

下载 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 组件之前设置这些行

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

例如：

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

Answer 2

对我来说 - 在 pdf.worker.js 中取消注释“Sig”条件没有用。我尝试了多种方式 - 更新现有的，下载新的工作人员 - 更改它然后在我的代码中引用它。没有成功。

对我有用的是 - 下面的解决方案。在 pdf.worker.js 中的第 19544 行添加这个 - 有一个 fieldType 的 switch case，即 switch (fieldType) 如果您在代码中找不到它 - 搜索下面的行。开关盒将在这条线上方

(0, _util.warn)('Unimplemented widget field type "' + fieldType + '", ' + "回到基本字段类型。");

找到该 switch 语句后 - 添加下面的 case

案例“签名”： return new SquareAnnotation(参数);

这对我来说是成功的。

Answer 3

在我的例子中，我没有使用 Angular，我只是使用原生 js 代码，所以我无法在我的两个文件中找到这部分代码“pdf.worker.js " 或 "pdf.viewer.js".

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

我确实根据下面的 Ninad Desai 评论解决了这个问题。所以我搜索了 data.fieldType === "Sig 的条件，并将 return 更改为无条件直接显示签名。

之前的代码：

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

之后的代码：

return a.isViewable.call(this);

我不确定这是否是最好的解决方案，但至少它目前有效！

文件名：pdf.worker.js 行：3321

这是 pdf.js 现在显示的示例： enter image description here

希望这篇评论对大家有所帮助...

在 Angular 中预览带有电子签名的 PDF 文件

Preview PDF file with e-signature in Angular

pdf

digital-signature

angular