Eckige 2 - Wie export von html zu pdf?

Wie mache ich einen download-button für das speichern von HTML-div-Inhalt als PDF-Datei in meinem angular2 Projekt?

Dies ist der HTML-Inhalt

<div id="obrz">
  <br><br>
  <p class="float-right font-weight-bold">Образац ЗПО</p>
  <br>
  <p class="float-left font-weight-bold">Подаци о обвезнику:</p>

  <br>

  <div class="row" style="width:100%">
    <div class="col-md-2"><p>Порески обвезник:</p></div>
    <div class="col-md-10"><input value="{{userModel.imeIprezime}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>ПИБ:</p></div>
    <div class="col-md-10"><input value="{{userModel.PIB}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>Адреса:</p></div>
    <div class="col-md-10"><input value="{{userModel.ulica + ' ' + userModel.broj + ' ' + userModel.grad}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>Општина:</p></div>
    <div class="col-md-10"><input value="{{userModel.opstina}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
  </div>
  <br>
  </div>

P. S. ich habe versucht, diese jsPDF Beispiel, aber es funktioniert einfach nicht für mich

Vielen Dank im Voraus

InformationsquelleAutor JozeV | 2018-07-17
  1. 6

    Probieren Sie etwas wie dieses:

    Erstellen Sie eine Schaltfläche, die außerhalb Ihrer div

    <button (click)="downloadPdf()">Download PDF</button>

    Wenn geklickt, rufen Sie diese Funktion in Ihre Komponente:

    downloadPdf() {
    let doc = new jsPDF();
    doc.addHTML(document.getElementById("obrz"), function() {
       doc.save("obrz.pdf");
    });
}
    • vielen Dank, es funktioniert Super 🙂 alle die besten
    • Um diese Lösung verwenden, müssen Sie include jsPDF - Bibliothek, und auch html2canvas oder rasterizeHTML.
    • irgendein Beispiel, oder code?
    • Ich bin mit den node-html-pdf zum konvertieren von HTML in PDF
    InformationsquelleAutor birwin
  2. 3

    JSPDF Werke für angular 2. Sie benötigen zum download der Definitionen von dt~. Importieren Sie die Bibliothek als:

    import * as jsPDF from "jspdf";

let doc = new jsPDF();

//Add a title to your PDF
doc.setFontSize(30); 
doc.text(12, 10, "Your Title");

//Create your table here (The dynamic table needs to be converted to canvas).
let element = <HTMLScriptElement>document.getElementsByClassName("pvtTable") 
 [0];
html2canvas(element)
.then((canvas: any) => {
doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, 
doc.internal.pageSize.width, element.offsetHeight / 5 );
doc.save(`Report-${Date.now()}.pdf`);
})

    In Ihrem system.js in der map-section folgende Zeile hinzufügen:

    "jspdf": "<myLibs>/jspdf.js",
    InformationsquelleAutor Bharat Satija
  3. 1

    Hören Ist die funktionsfähige demo Für Winkel 8

    Winkel-8 Html-Zu-Pdf-Demo-code

    Eckige 2 ändern Sie die Komponente.ts
    ViewChild code-segment 

    @ViewChild('pdfTable', {static: false}) pdfTable: ElementRef;

    zu Diesem

     @ViewChild('pdfTable') pdfTable: ElementRef;

    Hoffe Das Hilft...!

    InformationsquelleAutor Chathuran
Schreibe einen Kommentar