React pdf export is not working consistently

Question

I'm trying to export reports on my page. I’ve tried to use 2 diffrent libraries jspdf and react-to-pdf, Both are not working consistently. In both libraries you must put a ref on div and it will convert to img to pdf. its converting but, if i press 10 time to export pdf button it'll give me 10 different pdfs that not looks the same. This is my export pdf buttons, this one is using react-to-pdf library :

<Pdf targetRef={this.ref} filename="reacToPdf.pdf" scale={0.7}>
     {({ toPdf }) => <Button color='grey' onClick={toPdf}>Export PDF</Button>}
</Pdf>

This one is using jspdf :

<Button color='grey' onClick={() => {
     const div = document.getElementById('exportPdfDiv')
     html2canvas(div)
        .then((canvas)=> {
             const imgData = canvas.toDataURL('image/png');
             const pdf = new jsPDF('p', 'pt');
             pdf.addImage(imgData, 'PNG', 0, 0, 0, 0, undefined, false);
             pdf.save("jspdf.pdf");
             })
        }
    }>Export PDF 2</Button>

react-to-pdf library 3 diffrent pdf 1 2 3 jspdf library 3 difrrent pdf 1 2 3

As you can see each of them has a diffrent position without changing anything in code. the right pdf is should be like this one.

Answer 1

a bit late answer but if still needed you can check this: generate-pdf-from-react-html

With generate-pdf-from-react-html you can generate PDF with different orientations and correct size and layouts from pure html with styles included.