Как создать PDF-файл с помощью Angular 7?

Вы можете использовать jspdf.

рабочая демонстрация

.html

<div id="pdfTable" #pdfTable>
  <h1>{{name}}</h1>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
   </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

<div> <button  (click)="downloadAsPDF()">Export To PDF</button></div>

.ts

  public downloadAsPDF() {
    const doc = new jsPDF();

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const pdfTable = this.pdfTable.nativeElement;

    doc.fromHTML(pdfTable.innerHTML, 15, 15, {
      width: 190,
      'elementHandlers': specialElementHandlers
    });

    doc.save('tableToPdf.pdf');
  }

Вам необходимо отобразить содержимое для печати в DIV. После отображения содержимого используйте следующий код, который использовался и работал в моем проекте.

Шаг 1 :

Выполните следующие команды, чтобы установить пакеты npm

> npm install jspdf
> npm install html2canvas

Шаг 2:

Импортируйте установленные пакеты в app.components.ts. Я не импортировал эти пакеты в конструктор ()

> import * as jspdf from 'jspdf';
> import html2canvas from 'html2canvas';

Шаг 3:

Укажите идентификатор HTML-div, который нужно экспортировать как PDF. Добавьте кнопку, которая также активирует функцию.

<div id="MyDIv" style="margin-left: 45px;" class="main-container">
        
</div>
<div class="icon_image " title="Share As PDF" (click)="exportAsPDF('MyDIv');"><img src="assets/img/pdf.png"></div>

Шаг 4:

вызовите код для создания PDF следующим образом

    exportAsPDF(divId)
    {
        let data = document.getElementById('divId');  
        html2canvas(data).then(canvas => {
        const contentDataURL = canvas.toDataURL('image/png')  
        let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode
        // let pdf = new jspdf('p', 'cm', 'a4'); Generates PDF in portrait mode
        pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);  
        pdf.save('Filename.pdf');   
      }); 
    }

Это обычное требование, но вы не предоставили подробных сведений о конкретных требованиях к вашим PDF-файлам. Вы можете посмотреть:

https://www.npmjs.com/package/angular-pdf-generator

or

https://parall.ax/products/jspdf

как опции на стороне клиента. Есть и другие варианты, в зависимости от того, что вы, вероятно, захотите делать с однажды созданным PDF-файлом. Например, может иметь смысл отправить данные обратно на ваш сервер (если он у вас есть), чтобы создать PDF-файл, сохранить его в базе данных и т. Д.

Надеюсь, это поможет.

Данные, введенные пользователем, могут отображаться на странице HTML и могут быть преобразованы в PDF. В противном случае, если вы хотите привязать объект в шаблоне HTML, используйте ручки. Затем шаблон HTML можно преобразовать в PDF в формате angular 2/4/6/7 с помощью jspdf и html2canvas. Содержимое HTML должно обрабатываться, как показано ниже. Этот код поддерживает создание многостраничного PDF.

Вот данные - ›htmlcontent

TS :

generatePdf(data) {
     html2canvas(data, { allowTaint: true }).then(canvas => {
      let HTML_Width = canvas.width;
      let HTML_Height = canvas.height;
      let top_left_margin = 15;
      let PDF_Width = HTML_Width + (top_left_margin * 2);
      let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
      let canvas_image_width = HTML_Width;
      let canvas_image_height = HTML_Height;
      let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
      canvas.getContext('2d');
      let imgData = canvas.toDataURL("image/jpeg", 1.0);
      let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
      pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
      for (let i = 1; i <= totalPDFPages; i++) {
        pdf.addPage([PDF_Width, PDF_Height], 'p');
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
      }
       pdf.save("HTML-Document.pdf");
    });
  }

HTML:

<div #contentToConvert> Some content here </div>

<button (click)="generatePdf(contentToConvert)">Generate PDF</button>

Предыдущие ответы не помогли мне. Тогда я нашел это решение. Протестировано с angular 9.

версия jspdf ^ 2.3.0

npm install jspdf --save
npm install @types/jspdf --save-dev

1. Создайте таблицу в файле component.html. ‹table class="table" id="content" #content></table>

2. Таблица захвата в файле component.ts. @ViewChild('content') content: ElementRef;

savePdf() {
    const doc = new jsPDF();

    const pdfTable = this.content.nativeElement;

    doc.html(pdfTable.innerHTML, {
      callback(rst) {
        rst.save('one.pdf');
      },
      x: 10,
      y: 10
    });

  }

Попробуйте это решение.

Вы можете распечатать с помощью плагина PDFMAKE. Получите доступ к нему через Git по этой ссылке https://www.npmjs.com/package/ng-pdf-make. После того, как установка будет очень простой, просто импортируйте, добавьте эти библиотеки в компонент, который будет печатать:

импортировать * как pdfMake из pdfmake / build / pdfmake;

импортировать * как pdfFonts из pdfmake / build / vfs_fonts;

After that, create a function that will print your document such as:
            
            printDoc(){
            
            pdfMake.vfs = pdfFonts.pdfMake.vfs;
             let dd = {
           
// Here you put the page settings as your footer, for example:
                      footer: function(currentPage, pageCount) {
                          return [
                            {
                              text:
                                currentPage.toString() +
                                " de " +
                                pageCount +
                                "\n" +
                                "Footer Name",
                              alignment: currentPage ? "center" : "center"
                            }
                          ];
                        },
// Here you can enter the page size and orientation:
                pageSize: "A4",
                pageOrientation: "Portrait",
            //in pageOrientation you can put "Portrait" or "landscape"
        
// start the body of your impression:
        content: [
        
                     {
                        table: {
                          widths: ["*"],
                          body: [
                            [
                              {
                                text: [
                                  { text: `${'Text Example'}`, bold: true }
                                ],
                                style: "header",
                                width: "150",
                                alignment: "left",
                                border: [true, true, true, false],
                                margin: [0, 15, 0, 15]
                              }
                            ]
                          ]
                        }
                      },
        ]
        
            }
        
        pdfMake.createPdf(dd).download("Name of Print");
            }

Самое надежное и простое решение, которое я нашел, - html2pdf.js. Я использовал его с angular 8. Я пытался создать stackblitz, но у него есть ошибка разрешения. Поэтому я вставляю следующий код:

import * as html2pdf from 'html2pdf.js';

let options = {
        margin: 1,
        filename: 'receipt.pdf',
        html2canvas: { 
          dpi: 192,
          letterRendering: true, 
          allowTaint: true, 
          useCORS: true, 
          logging: false, 
          scrollX: 0,
          scrollY: 0 
        },
        jsPDF: {
          orientation: 'portrait',
          unit: 'cm',
          format: 'a4'
        }
      }; 
      html2pdf().set(options).from(nativeElement).save().finally(() => anyfunc());