Trabalhando com JsPdf com React

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!

Comments

[junior work account]

Ficou muito bom, eu substitui while por do while pra não ser necessário duplicar a chamada no método addImage, assim fazendo tudo em um mesmo bloco, essa postagem foi de grande ajuda.