在 Angular 中使用电子签名预览 PDF 文件

Question

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

如果我将文档下载到我的计算机上，我可以看到签名是可以的。但是当尝试使用 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 时，控制台会显示警告消息：“警告：未实现的小部件字段类型“Sig”，回退到基本字段类型。”

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

Answer 1

在我的情况下，我不使用 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

希望这篇评论对你们有所帮助...

Answer 2

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

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

(0, _util.warn)('未实现的小部件字段类型 "' + fieldType + '", ' + "回退到基本字段类型。");

一旦你找到那个 switch 语句 - 添加下面的 case

案例“信号”： 返回新的 SquareAnnotation(参数);

这对我来说是成功的。

Answer 3

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