webentwicklung-frage-antwort-db.com.de

Wie erstelle ich ein PDF mit Angular 7?)?

Ich muss aus den von einem Benutzer eingegebenen Daten einen PDF - Bericht erstellen, der in einem Objekt gespeichert wird. Bisher bin ich auf Dinge gestoßen, die eine HTML-Seite generieren und dann einen Screenshot machen und konvertiert es in PDF. Ich möchte ein PDF direkt aus den im Objekt gespeicherten Daten generieren. Irgendwelche Ideen?

12

Dies ist eine häufige Anforderung, aber Sie haben nicht viele Details zu den spezifischen Anforderungen Ihrer PDFs angegeben. Sie können sich ansehen:

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

oder

https://parall.ax/products/jspdf

als clientseitige Optionen. Es gibt auch andere Optionen, je nachdem, was Sie wahrscheinlich mit dem einmal generierten PDF) tun möchten. Beispielsweise ist es möglicherweise sinnvoller, die Daten an Ihren Server zurückzusenden (falls vorhanden) eins) um ein PDF UND generieren Sie es in einer Datenbank usw.) zu generieren.

Hoffentlich hilft das.

5
Paul Jowett

Sie können Html als PDF herunterladen, hoffe, dies wird helfen ..!

Arbeitsdemo

. 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');
  }
3
DeC

Der folgende Code wurde für mein Projekt verwendet und funktioniert

Schritt 1: Führen Sie die folgenden Befehle aus, um npm-Pakete zu installieren

> npm install jspdf
> npm install html2canvas

Schritt 2: Importieren Sie installierte Pakete in app.components.ts. Ich habe diese Pakete nicht in constructor () importiert.

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

Schritt 3: Geben Sie eine ID für das HTML-Div an, das als PDF exportiert werden muss. Fügen Sie eine Schaltfläche hinzu, die auch die Funktion aktiviert.

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

Schritt 4: Schreiben Sie den Code zum Generieren von PDF wie folgt)

    exportAsPDF()
      {
        let data = document.getElementById('MyDIv');  
        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');   
        }); 
      }
2
Basil Mohammed

Sie können mit dem PDFMAKE-Plugin drucken. Sie können auf Git über diesen Link darauf zugreifen https://www.npmjs.com/package/ng-pdf-make . Nachdem die Installation sehr einfach ist, importieren Sie einfach diese Bibliotheken und fügen Sie sie in die Komponente ein, die gedruckt werden soll:

* als pdfMake aus "pdfmake/build/pdfmake" importieren;

* als pdfFonts aus "pdfmake/build/vfs_fonts" importieren;

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");
            }
0
Mirellyssl

Vom Benutzer eingegebene Daten können auf der HTML-Seite angezeigt und in PDF konvertiert werden. Andernfalls, wenn Sie das Objekt in einer HTML-Vorlage binden möchten, verwenden Sie Lenker. Dann kann die HTML-Vorlage in PDF in angular) konvertiert werden 2/4/6/7 mit jspdf und html2canvas. Der HTML-Inhalt sollte wie folgt verarbeitet werden. Dieser Code unterstützt die Erstellung von mehrseitigen PDFs.

Hier Daten -> HTML-Inhalt

 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>
0
Lincy PJ

Hier ist ein guter Überblick über die verfügbaren Tools und Technologien: Moderne Konvertierung von HTML in PDF 2019 Und ein Arbeitsbeispiel mit jspdf & html2canvas: hier

0
AB Abhi