Блог

Я пытаюсь экспортировать отчеты на своей странице. Я пытался использовать 2 разные библиотеки jspdf и react-to-pdf, обе не работают последовательно. В обеих библиотеках вы должны поставить ссылку на div, и он преобразуется из img в pdf. его преобразование, но если я нажму 10 раз, чтобы экспортировать кнопку pdf, это даст мне 10 разных PDF-файлов, которые не выглядят одинаково. Это мои кнопки экспорта pdf, в этой используется библиотека react-to-pdf :

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

Этот использует 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 3 разные pdf 1 2 3
библиотека jspdf 3 различных pdf 1 2 3

Как вы можете видеть, каждый из них занимает другую позицию, ничего не меняя в коде. правильный pdf-файл должен быть таким же, как этот.

немного запоздалый ответ, но если все еще нужен, вы можете проверить это: сгенерировать-pdf-из-react-html

С помощью generate-pdf-from-react-html вы можете создавать PDF-файлы с различной ориентацией, правильным размером и макетами из чистого html с включенными стилями.