DEV Community

Cover image for Trabalhando com JsPdf com React
Julia  Maschion
Julia Maschion

Posted on

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);
});}; 
Enter fullscreen mode Exit fullscreen mode

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!

Image description

Top comments (1)

Collapse
 
junior_workaccount_3ba4e profile image
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.