Как создать файл PDF со своей страницы в проекте на основе React?

Question

Я пытался создать этот файл PDF с html2canvas и jspdf :

const input = document.getElementById('pdfTest')!;
html2canvas(input)
      .then((canvas) => {
           const imgData = canvas.toDataURL('image/png');
           const pdf = new jsPDF();
          * pdf.addImage(imgData, 'PNG', 0, 0);
           pdf.save("download.pdf");
      });

Но в строке * я получил эту ошибку:

Unhandled Rejection (Error): Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 

Большое спасибо.

Answer 1

Используйте следующий метод (вы можете изменить размер шрифта / стиль):

printDet = (e) => {
        html2canvas(document.querySelector("#pdfTest")).then(canvas => {

            const imgData = canvas.toDataURL('image/png');
            const pdf = new jsPDF();

            pdf.setFontSize(20)
            pdf.setFontStyle("bold")
            pdf.addImage(imgData, 'JPEG', 0, 0, 210, 200, 'alias');

            pdf.save('download.pdf');

        });

    }

Не забудьте импортировать:

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';