[Angular]Converter HTML para PDF
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
Curtidas 0
Melhor post
Yuri Aguiar
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
GOSTEI 1
Mais Respostas
Elton Freitas
10/08/2021
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");
}
GOSTEI 0