Отправка JSON данных на принтер в формате PDF Angular - PullRequest
Новая
       23

Отправка JSON данных на принтер в формате PDF Angular

0 голосов
/ 26 февраля 2020

Я получаю JSON данные из API, после получения этих данных мне нужно отправить эти JSON данные для печати в формате PDF. Пожалуйста, помогите мне решить эту проблему в Angular.

Перефразируя мой вопрос: теперь я получаю HTML данные из API в формате JSON, и я успешно обработал их на компоненте, но я применяю CSS для разрыва страницы до не работает. Может кто-нибудь, пожалуйста, помогите мне в этом. Когда я создаю в виде простого индекса. html файл как данные c, он работает, но так же с компонентом Angular, он не работает, будь то STATI c или динамический c.

Я пытался 

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

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Посмотрите на эту библиотеку: http://pdfmake.org/# /

Это потрясающе!

Посмотрите на их игровую площадку здесь: http://pdfmake.org/playground.html

Basi c пример кода: 

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'
    ]

}

Это создаст 2 линии в PDF.

Их npm: npm i pdfmake

0 голосов
/ 26 февраля 2020

Один из способов добиться этого - html2canvas и jsPdf . Сначала вы конвертируете HTML в изображение с помощью html2canvas, а затем печатаете изображение с помощью 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

Другой способ заключается в использовании jsPdf без html2canvas. Тогда вам нужно сделать макет и стиль PDF для себя

...