Neste domingo tive uma experiência que causou uma dor de cabeça bem grande em relação ao JsPdf. Para quem não conhece, é uma biblioteca que gera em PDF's. Alguns problemas que tive: imagem jpeg não funciona, textos estavam sendo quebrados pela metade e não adicionava um outra página automaticamente quando acaba o A4.
Infelizmente o problema da imagem ainda não descobri como resolver e se você souber fico feliz que comente neste post para ajudar mais pessoas da comunidade. Mas, o problema do texto + adicionar outra página automaticamente, após MUITA pesquisa, consegui uma solução.
import { jsPDF as JsPDF } from 'jspdf';
import html2canvas from 'html2canvas';
const generatePdf = (): any => {
const htmlSource = document.getElementById('profile');
const filename = `Currículo ${fields.name}`;
if (!htmlSource) {
return;
}
html2canvas(htmlSource).then(function (canvas) {
const imgData = canvas.toDataURL('image/png');
const imgWidth = 180;
const pageHeight = 297;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 5;
const pdf = new JsPDF('p', 'mm');
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
pdf.addPage();
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
pdf.save(filename);
});};
Use onClick={() => generatePdf()} no componente que deseja baixar o PDF.
Se no seu caso continuar cortando o texto em algum local que não está bom, modifique o const pageHeight = 297;
, para o meu caso 297 ficou bom.
Documentação: http://raw.githack.com/MrRio/jsPDF/master/docs/index.html
Espero ter ajudado!
Top comments (1)
Ficou muito bom, eu substitui
while
pordo while
pra não ser necessário duplicar a chamada no métodoaddImage
, assim fazendo tudo em um mesmo bloco, essa postagem foi de grande ajuda.