时间戳

首页 > 解决方案 > 以PDF格式Angular将JSON数据发送到打印机

css - 以PDF格式Angular将JSON数据发送到打印机

问题描述

我从 API 获取 JSON 数据，在获取该数据后，我需要发送该 JSON 数据以 pdf 格式打印。请帮助我在 Angular 中解决这个问题。

重新定义我的问题：我现在从 API 以 JSON 格式获取 HTML 数据，并且我成功地将它呈现在组件上，但是我将 CSS 应用于 page-break-before 不起作用。谁能帮我解决这个问题。当我在简单的 index.html 文件中创建静态数据时，它可以工作，但与 Angular 组件相同，无论它是静态的还是动态的，它都不起作用。

我试过了

@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}

我的 HTML 代码

<div class="page-break"></div>
<p>Date: 27/02/2020 </p>
<p>Sub: Request for ..............</p>
<p>WRT the BG number <b>123456789</b></p><br><br><br>
<p>Account number: 0000000000</p>
<p>Acccount Name: ABC</p>
<p>IFSC: ABC12456</p><br><br>
<p>Regards</p>

<div class="page-break"></div>
<p>Date: 27/02/2020 </p>
<p>Sub: Request for ..............</p>
<p>WRT the BG number <b>123456789</b></p><br><br><br>
<p>Account number: 0000000000</p>
<p>Acccount Name: ABC</p>
<p>IFSC: ABC12456</p><br><br>
<p>Regards</p>

标签： cssjsonangularpage-break

解决方案

看看这个库： http: //pdfmake.org/#/

这很棒！

在这里看看他们的游乐场：http: //pdfmake.org/playground.html

基本示例代码：

const dd = {
    content: [
        'First paragraph',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ]

}

这将在 PDF 中创建 2 行。

他们的 npm：npm i pdfmake

推荐阅读