使用 domtoimage.toPng 为 pdf 页面内的两个 div 导出 pdf

Question

我有两个 divs (div1,div2) 我想导出 div1 inside pdf page 1 并导出 div 2 inside pdf page 2 我的问题我只能使用 domtoimage.toPng 从他们那里捕获一个 div 我如何捕获两个 div 我的代码：`

                               <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>`

Answer 1

您需要准备 2 个 blob 以将它们保存为 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();
    });
});

使用 domtoimage.toPng 为 pdf 页面内的两个 div 导出 pdf

export pdf for two divs inside pdf pages using domtoimage.toPng

javascript

html

pdf

dom-to-image