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 (0)