web-dev-qa-db-fra.com

Angular 2 - Comment exporter du html en pdf?

Comment créer un bouton de téléchargement pour enregistrer le contenu HTML div en tant que fichier PDF dans mon projet angular2?

Ceci est le contenu HTML

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

P.S. J'ai essayé this exemple jsPDF, mais cela ne fonctionne tout simplement pas pour moi

Merci d'avance

htmlangularpdfdownloadsave
4
JozeV

Essayez quelque chose comme ceci:

Créez un bouton en dehors de votre div

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

Lorsque vous cliquez dessus, il appellera cette fonction dans votre composant:

downloadPdf() {
    let doc = new jsPDF();
    doc.addHTML(document.getElementById("obrz"), function() {
       doc.save("obrz.pdf");
    });
}
6
birwin

JSPDF fonctionne pour angular 2. Vous devez télécharger les définitions depuis dt ~. Importez la bibliothèque en tant que:

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`);
})

Dans votre system.js, dans la section map, ajoutez cette ligne:

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

Hear est la démo de travail pour angular 8

Angular 8 Html To Pdf Demo code

Pour Angular 2 vous devez changer le segment de code component.ts ViewChild

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

pour ça

 @ViewChild('pdfTable') pdfTable: ElementRef;

J'espère que cela vous aidera ...!

1
DeC