如何用 html2canvas 和 jsPDF 连接两个页面

Question

我正在尝试创建多页 PDF 文档。

我这样做是通过使用 html2canvas 捕获每个页面的 JPEG。然后将每个 JPEG 作为新页面添加到 pdf。代码的要点如下（灵感来自这篇文章here）：

var pdf = new jsPDF('p', 'mm', 'a4', true);

html2canvas(document.getElementById("image_1")).then(canvas => {
    pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, 210, 297, 'FAST');
    html2canvas(document.getElementById("image_2")).then(canvas2 => {
        pdf.addPage();
        pdf.addImage(canvas2.toDataURL('image/jpeg'), 'JPEG', 0, 0, 210, 297, 'FAST');
        pdf.save();

    });
});

我希望输出在第一页上具有 id="image_1" 的元素的内容，在第二页上具有 id="image_2" 的元素的内容。但是，相反，我在第一页和第二页上都得到了一个包含 id="image_1" 元素内容的 PDF...

我想知道是否正在 overwritten/not 写一些东西，但从我的角度来看，我看不出那会如何发生。任何帮助将不胜感激。

Answer 1

不确定为什么上面的嵌套承诺结构不起作用。我将其重构为以下内容并看到了成功。基本上我为每个 canvas 元素创建承诺，并在它们被解析后将它们添加到 PDF 中：

  getCanvasData = element => {
    return new Promise((resolve, reject) => {
      html2canvas(element, { scale: 2, logging: true })
        .then(function(canvas) {
          resolve(canvas.toDataURL("image/jpeg"));
        })
        .catch(function(error) {
          reject(
            "Error while creating canvas for element with ID: " + element.id
          );
        });
    });
  };

  promisePrint = () => {
    var pdf = new jsPDF({
      orientation: "p",
      unit: "mm",
      format: "a4",
      compression: true
    });

    let pageIds = ["page1", "page2", "page3", "page4"];
    let promises = [];
    pageIds.forEach(page => {promises.push(this.getCanvasData(document.getElementById(page)));
});

    Promise.all(promises).then(dataUrls => {
    dataUrls.forEach((dataUrl, i) => {
        pdf.addImage(dataUrl, "JPEG", 0, 0, 210, 297, undefined, "FAST");
        pdf.addPage();
      });
      pdf.save("testingPromises")
    });
  };

如何用 html2canvas 和 jsPDF 连接两个页面

How to concatenate two pages with html2canvas and jsPDF

javascript

pdf

html2canvas

jspdf