html2canvas и React для создания PDF не работают

Я использую html2canvas и jsPdf для создания Pdf из HTML для одного реагирующего приложения.

onClick моей кнопки загрузки я вызываю эту функцию:

printDocument() {
    const input = document.getElementById('divToOfferInfo');
    const pdf = new jsPDF();
    if (pdf) {
      html2canvas(input, {
        useCORS: true
      })
        .then(canvas => {
          const imgData = canvas.toDataURL('image/png');
          console.log(imgData); //Maybe blank, maybe full image, maybe half of image
          pdf.addImage(imgData, 'PNG', 10, 10);
          pdf.save('download.pdf');
        });
    }
}

Результат абсолютно случайный. Результат холста полный, наполовину или пустой, но не правильный.

Я думаю, что проблема связана с рендерингом React.

Спасибо за помощь.


reactjs javascript jspdf html2canvas html2pdf
person Pterrat    schedule 18.06.2019    source источник
comment
такая же ошибка, как это? RangeError: Недопустимая кодовая точка NaN   -  person ichimaru    schedule 22.03.2021

Ответы (2)


arrow_upward
3
arrow_downward

Я нашел альтернативное решение. Вместо библиотеки html2canvas мы можем использовать библиотеку dom-to-image. С этим работает.

import domtoimage from 'dom-to-image';
...
        printDocument() {
            const input = document.getElementById('divToOfferInfo');
            const pdf = new jsPDF();
            if (pdf) {
              domtoimage.toPng(input)
                .then(imgData => {
                  pdf.addImage(imgData, 'PNG', 10, 10);
                  pdf.save('download.pdf');
                });
            }
        }
person Pterrat    schedule 18.06.2019
comment
Спасибо, так и было, тот же код, h2c не работал, это заработало сразу. - person Andy; 05.06.2020

arrow_upward
1
arrow_downward

Вы можете использовать вот так. Я использую этот код, и он работает хорошо.

savePDF() {

        const printArea = document.getElementById("printWrapper");

        html2canvas(printArea).then(canvas => {
            const dataURL = canvas.toDataURL();
            const pdf = new jsPDF();

            pdf.addImage(dataURL, 'JPEG', 20, 20, 180, 160);

            pdf.save('saved.pdf')
        })

    }
person burakkp    schedule 26.06.2019
comment
причинив мне RangeError: Invalid code point NaN - person ichimaru; 22.03.2021
comment
Вы проверили свой dataURL? Я думаю, что это связано с вашим dataURL. - person burakkp; 23.03.2021