如何在“路由器插座”内生成 PDF 内容？

Posted 2023-03-29

【中文标题】如何在“路由器插座”内生成 PDF 内容？

【英文标题】：How to generate PDF of contents inside the 'router-outlet'?

【发布时间】：2022-01-20 03:50:23

【问题描述】：

我正在制作一个仪表板，其中router-outlet 中显示了不同的组件。我想生成“仅”router-outlet 中所有组件的 pdf。我认为jsPDF 可以解决问题。但问题是，我制作了一个 vc-export-pdf 按钮，它位于一个单独的组件 中。我正在检查如何使用 jsPDF，他们中的大多数人都使用参考来访问他们想要制作 pdf 的div。现在如何访问位于单独组件中的 div 的内容？

【问题讨论】：

您能在 stackblitz 中分享您的演示吗？我想看看并了解如何在 Angular 应用程序中使用 html2canvas 来使用 js-pdf？谢谢。

这是link。 stackblitz 有一些问题，但你会明白其中的逻辑

【参考方案1】：

这可能真的很棘手，但是要获取 div 的数据，您可以使用 ViewChild 但请记住，当您从 html div 使用 jsPDF 呈现时，需要呈现 div 并且它的内容需要呈现在 pdf 中.如果您想生成未呈现的内容的 pdf。我建议你从 jsPDF 创建一个 pdf，但都是用 jsPDF 的函数而不是 HTML 编写的。 如果您使用 HTML2Canva，带有 HTML 的 jsPDF 也可能不太方便，因为它会截取屏幕截图（如果您有太多东西，它可能会变得模糊并且不适合您的页面）并且您将无法复制 pdf 上的文本例如。

【讨论】：

您建议我应该使用什么来从 HTML 生成 pdf？除了jsPDF

不幸的是，我用来用 js 生成 pdf 的唯一库是 jsPDF。我首先尝试从 HTML 生成，但事实证明，如果它只是 PDF 的图像，它不会对用户友好。我知道自己用 jsPDF 的功能编写 PDF 需要做很多工作，但会更清晰。但是有 jsPDF 的替代品，但我没有尝试过：js.libhunt.com/jspdf-alternatives

“使用 jsPDF 的函数自己编写 PDF”是什么意思

你可以像这样写一个pdf：const doc = new jsPDF('p', 'mm', 'a4', true); doc.addFileToVFS('Bitter.ttf', BITTER_FONT); doc.addFont('Bitter.ttf', 'bitter', 'normal'); try const imgUb = new Image(); imgUb.src = 'assets/logo/logo.png'; doc.addImage(imgUb, 'png', 25, 15, 15, 15); const img = new Image(); img.src = 'assets/logo/img.png'; doc.addImage(img, 'png', 120, 12, 70, 20); catch (err) this.log.warn('Cannot load images'); doc.text( doc.splitTextToSize('totototext, 160), 25, 45, );

然后下载它你可以使用 doc.save('nameofile')