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

Question

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

重述我的问题:我现在正在从API获得JSON格式的HTML数据，并成功地将其呈现在组件上，但我正在应用CSS进行分页-之前不起作用。有谁能帮帮我吗？当我在简单的index.html文件中创建静态数据时，它是工作的，但与角度组件一样，无论它是静态的还是动态的，它都不工作。

我试过了

@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>

Answer 1

实现这一点的一种方法是使用html2canvas和jsPdf。首先，使用html2canvas将HTML转换为图像，然后使用jsPdf打印图像

const input = document.getElementById('print-container');
html2canvas(input)
  .then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF({
      orientation: 'landscape',
    });
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('download.pdf');
  });

看看我做的Stackblitz：https://stackblitz.com/edit/angular-p1a7xn

另一种方法是使用不带html2canvas的jsPdf。然后，您需要自己设置pdf的布局和样式。

Answer 2

看看这个库：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