html2canvas和React生成pdf不起作用

时间:2019-06-18 08:05:42

标签: javascript reactjs jspdf html2canvas html2pdf

我正在使用html2canvas和jsPdf从HTML为一个React应用程序生成Pdf。

点击我的下载按钮后,我将其称为:

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的渲染有关。

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

我找到了替代解决方案。代替使用html2canvas lib,我们可以使用dom-to-image lib。它正在使用它。

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');
                });
            }
        }

答案 1 :(得分:0)

您可以像这样使用。我正在使用此代码,并且运行良好。

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')
        })

    }