在 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屋!