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

【问题标题】：How to concatenate two pages with html2canvas and jsPDF如何使用 html2canvas 和 jsPDF 连接两个页面
【发布时间】：2026-01-06 00:45:01
【问题描述】：

我正在尝试创建一个多页 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...

我想知道是否有东西被覆盖/没有被写入，但从我的角度来看，我看不出这是怎么发生的。任何帮助将不胜感激。

【问题讨论】：

标签： javascript pdf jspdf html2canvas

【解决方案1】：

不确定为什么上述嵌套的 promise 结构不起作用。我将其重构为以下内容并看到了成功。基本上我为每个画布元素创建承诺，并在它们解决后将它们添加到 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")
    });
  };

【讨论】：