如何在按钮单击时构建 Angular HTML 模板？

Question

我正在尝试创建一个 HTML 模板以将其导出为 PDF 文件，但我不确定如何使用 Angular 的引擎执行此操作；

我需要做的基本上是在单击“下载为 PDF”按钮时构建此模板，这应该包含我在一个组件中拥有的所有信息并用于创建将导出的 HTML 文档，但是没有显示在屏幕上或类似的东西上。

由于我的实际屏幕和 PDF 文件所需的格式，我不能只使用相同组件的 HTML 模板，因此我正在寻找在单击按钮时构建所需的模板结构.

我当前的组件使用mat-tabs 来显示信息，但在实际的 PDF 中，我需要每个选项卡在页面中成为其自己的单独部分；所以当我想生成文件时，我需要仅构建这个新的 HTML 结构

有什么想法我可以做这样的事情吗？

Answer 1

根据您的标准，这听起来像是一个全新的组件，专门针对 PDF 导出所需的格式创建。您需要添加正确的标题（例如 content-disposition）以添加 PDF 附件。

您的下一个任务是确定如何将数据放入专用于 PDF 导出的新组件中。如果您已经在应用程序中使用 Redux/NGRX 存储，那么这可能很容易使用。

在同一模块内的组件之间共享数据的更常见方法是利用 Angular 服务。该服务被注入到组件的两个版本中，所有重要数据都被保存并从该服务中检索。