Angular 2-Como exportar html para pdf?
Como é que faço um botão de download para gravar o conteúdo HTML div como ficheiro PDF dentro do meu projecto angular2?
Este é o conteúdo 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>
P. S. Eu tentei Este exemplo jsPDF, mas simplesmente não funciona para mim
obrigado antecipadamente
1
2 answers
Tenta algo assim:
Crie um botão fora do seu div
<button (click)="downloadPdf()">Download PDF</button>
Quando clicado, irá chamar esta função no seu componente:
downloadPdf() {
let doc = new jsPDF();
doc.addHTML(document.getElementById("obrz"), function() {
doc.save("obrz.pdf");
});
}
2
Author: birwin, 2018-07-17 16:30:28
A JSPDF trabalha para o angular 2. Você precisa baixar as definições de dt~. Importar a biblioteca como:
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`);
})
No teu sistema.js, na secção do mapa adicione esta linha:
"jspdf": "<myLibs>/jspdf.js",
1
Author: Bharat Satija, 2018-07-19 09:04:28