您将如何在客户端应用程序中创建可下载的 pdf？答案

【问题标题】：How would you create a downloadable pdf in a client side app?您将如何在客户端应用程序中创建可下载的 pdf？
【发布时间】：2020-02-27 17:35:51
【问题描述】：

我们对管理工具的要求之一是创建一个可以填写并翻译成可下载 pdf 文件的表单。（准确地说是带有空白输入字段的条款和条件）。

我做了一些谷歌搜索并尝试在 html 和 css 中创建一个表单，并使用 html2canvas 包将其转换为画布。然后我使用jspdf包将其转换为pdf文件。问题是我无法让它适应并调整大小以适应具有正确边距的 a4 格式。如果我花一些时间，我相信我可以找到一个可行的解决方案。

但是，我真正的问题是你们将如何解决这个问题？是否有第三方应用程序/服务可以执行此操作？或者你会在服务器端做这一切吗？我们当前的应用使用 Angular 7 和 Firebase 作为我们的后端。

干杯！

【问题讨论】：

这应该是因为 DPI 值。英寸/厘米（按 DPI），因此如果是 8.27 英寸和 300dpi 打印机，则宽度应为 300 * 8.27 我个人从 nodejs 在服务器端创建 pdf，然后将下载链接发送给用户。

标签： html node.js angular pdf

【解决方案1】：

 My service function:
 getEvidenceFile(id: number, getFileContent: boolean) {

 return this.http.get(environment.baseUrl + ‘upload’ + ‘/’ + id , {responseType: ‘blob’ as ‘json’})
 .map(res => res);
 }

 My component function called from the selected item of a FileDownload…
 FileDownload(event: any) {

 // const blob = await this.callService.getEvidenceFile(event.target.value, true);
 // const url = window.URL.createObjectURL(blob);

 this.callService.getEvidenceFile(event.target.value, true).subscribe(data => {

 var binaryData = [];
 binaryData.push(data);
 var downloadLink = document.createElement(‘a’);
 downloadLink.href = window.URL.createObjectURL(new Blob(binaryData));
 document.body.appendChild(downloadLink);
 downloadLink.click();

 });
 }

【讨论】：

【解决方案2】：

我能够使用 npm 包 pdfmake 根据用户在与我的表单交互时提供的用户信息创建动态 pdf。（我使用的是 React）它在新选项卡中打开了 pdf，用户可以保存 pdf。在另一个应用程序（仍然是 React）中，

我使用相同的包创建收据，以便您可以自定义“页面”的大小。我们创建了 pdf 并使用 getBase64() 方法并将 pdf 作为电子邮件附件发送。

【讨论】：