[Angular]Converter HTML para PDF
10/08/2021
0
Boa tarde, estou utilizando o html2pdf() com o angular 9, para converter html para pdf, mas quando gera o pdf o layout não esta conforme o html e na quebra de paginas ele cotar o texto na horizontal.
Código angular utilizado.
Salvar()
{
const printContent = document.getElementById("print");
const opt = {
margin:[5,0,5,0],
pagebreak: { mode: 'avoid-all', before: '#page2el' },
image:{ type: 'jpeg' },
html2canvas:{
useCORS: true
},
jsPDF:{
orientation: 'p',
unit: 'mm',
format: 'a4'
}
}
html2pdf()
.from(printContent)
.set(opt)
.toPdf()
.save("Download.pdf");
}
Código angular utilizado.
Salvar()
{
const printContent = document.getElementById("print");
const opt = {
margin:[5,0,5,0],
pagebreak: { mode: 'avoid-all', before: '#page2el' },
image:{ type: 'jpeg' },
html2canvas:{
useCORS: true
},
jsPDF:{
orientation: 'p',
unit: 'mm',
format: 'a4'
}
}
html2pdf()
.from(printContent)
.set(opt)
.toPdf()
.save("Download.pdf");
}
Elton Freitas
Curtir tópico
+ 0
Responder
Post mais votado
10/08/2021
Olá meu amigo, beleza ? Não manjo muito em angular, mas vamos lá...
Tente algo parecido com isso
Abraço
Tente algo parecido com isso
// Importa a biblioteca jsPDF para gerar documentos pdf
import * as jspdf from 'jspdf';
// Importa a biblioteca que vai te permitir capturar a tela web da sua app web
import html2canvas from 'html2canvas';
salvar () {
var data = document.getElementById('print');
html2canvas(data).then(canvas => {
var imgWidth = 208;
var imgHeight = canvas.height * imgWidth / canvas.width;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4');
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('newPDF.pdf');
});
}
Abraço
Yuri Aguiar
Responder
Mais Posts
12/08/2021
Elton Freitas
Bom dia meu mano. Obrigado pelo retorno, mas consegui resolver.
Vou postar o código que deu certo para mim, pode ser que ajude alguém.
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';
import { promise } from 'protractor';
public Salvar(nomeArquivo : string)
{
const printContent = document.getElementById("print");
printContent.style.fontSize = '14px';
const opt = {
margin:[5,0,5,0],
image:{ type: 'jpeg',quality: 0.98},
html2canvas:{
useCORS: true,
dpi:192
},
jsPDF:{
orientation: 'p',
unit: 'mm',
format: 'a4'
}
}
html2pdf()
.from(printContent)
.set(opt)
.toPdf()
.get('pdf').then(function (pdf) {
var totalPages = pdf.internal.getNumberOfPages();
for (let i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(8);
pdf.setTextColor(75);
pdf.text('\\n Pagina ' + i + ' de ' + totalPages, 175, (pdf.internal.pageSize.getHeight()-8));
}
})
.save(nomeArquivo+".pdf");
}
Vou postar o código que deu certo para mim, pode ser que ajude alguém.
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';
import { promise } from 'protractor';
public Salvar(nomeArquivo : string)
{
const printContent = document.getElementById("print");
printContent.style.fontSize = '14px';
const opt = {
margin:[5,0,5,0],
image:{ type: 'jpeg',quality: 0.98},
html2canvas:{
useCORS: true,
dpi:192
},
jsPDF:{
orientation: 'p',
unit: 'mm',
format: 'a4'
}
}
html2pdf()
.from(printContent)
.set(opt)
.toPdf()
.get('pdf').then(function (pdf) {
var totalPages = pdf.internal.getNumberOfPages();
for (let i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(8);
pdf.setTextColor(75);
pdf.text('\\n Pagina ' + i + ' de ' + totalPages, 175, (pdf.internal.pageSize.getHeight()-8));
}
})
.save(nomeArquivo+".pdf");
}
Responder
Clique aqui para fazer login e interagir na Comunidade :)