如何在按鈕單擊時構建 Angular HTML 模板？

Question

我正在嘗試創建一個 HTML 模板以將其導出為 PDF 文件，但我不確定如何使用 Angular 的引擎執行此操作；

我需要做的基本上是在單擊“下載為 PDF”按鈕時構建此模板，這應該包含我在一個組件中擁有的所有信息並用於創建 HTML 文檔，該文檔將被導出，但未顯示在屏幕或類似的東西。

由於我的實際屏幕和 PDF 文件上需要的格式，我不能只使用相同組件的 HTML 模板，因此我希望在單擊按鈕時構建我需要的模板結構。

我當前的組件使用mat-tabs來顯示信息，但在實際的 PDF 中，我需要每個選項卡在頁面中成為其自己的單獨部分； 所以只有當我想生成文件時，我才需要構建這個新的 HTML 結構

有什么想法我可以做這樣的事情嗎？

Answer 1

根據您的標准，這聽起來像是一個全新的組件，專門針對 PDF 導出所需的格式創建。 您將添加正確的標題，例如 content-disposition 以獲得 PDF 附件。

您的下一個任務是確定如何將數據放入專用於 PDF 導出的新組件中。 如果您已經在應用程序中使用 Redux/NGRX 存儲，那么這可能很容易使用。

在同一模塊內跨組件共享數據的更常見方法是利用 Angular 服務。 該服務被注入到組件的兩個版本中，所有重要數據都被保存並從該服務中檢索。