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。

我想知道是否有人在改写/未写东西，但是从我的角度来看，我看不到这种情况如何发生。任何帮助将不胜感激。

Answer 1

不确定上述嵌套的Promise结构为何不起作用。我将其重构为以下内容，并看到了成功。基本上，我为每个canvas元素创建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")
    });
  };

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

1 个答案: