0

I have two divs (div1,div2) i want to export div1 inside pdf page 1 and export div2 inside pdf page 2 my problem i can capture only one div from them using domtoimage.toPng how can i capture both of divs my code : `

                               <script>
              $('#downloadPDF').click(function () {
              domtoimage.toPng(document.getElementById('div1'))
          //  domtoimage.toJpeg(document.getElementById('div2'))

    .then(function (blob) {
        var pdf = new jsPDF('p', 'pt', [$('#div1').width(), $('#div1').height()]);
        pdf.addImage(blob, 'PNG', 0, 0, $('#div2').width(), $('#div2').height());

  pdf.addPage();

        pdf.addImage(blob, 'PNG', 0, 0, $('#div1').width(), $('#div1').height());
        pdf.save("report.pdf");

        that.options.api.optionsChanged();
    });
    });
    </script>`
MALEEK
  • 11
  • 7

1 Answers1

0

You need to prepare 2 blobs to save them into PDF.

$('#downloadPDF').click(function() {
  Promise.all([
      domtoimage.toPng(document.getElementById('div1')),
      domtoimage.toPng(document.getElementById('div2'))
    ])
    .then(function([blob1,  blob2]) {
      var pdf = new jsPDF('p', 'pt', [$('#div1').width(), $('#div1').height()]);
      pdf.addImage(blob1, 'PNG', 0, 0, $('#div1').width(), $('#div1').height());

      pdf.addPage();

      pdf.addImage(blob2, 'PNG', 0, 0, $('#div2').width(), $('#div2').height());
      pdf.save("report.pdf");

      that.options.api.optionsChanged();
    });
});
Pavlo Zhukov
  • 3,007
  • 3
  • 26
  • 43
  • thank you , but it gives me this error dom-to-image.min.js:2 Uncaught (in promise) TypeError: Cannot read property 'cloneNode' of null at d (dom-to-image.min.js:2) – MALEEK Mar 27 '21 at 13:10
  • It looks like you provide an empty node in one of `domtoimage.toPng()`. Please debug it yourself. – Pavlo Zhukov Mar 27 '21 at 13:30