Как объединить две страницы с помощью html2canvas и jsPDF - PullRequest
Новая
       15

Как объединить две страницы с помощью html2canvas и jsPDF

1 голос
/ 21 мая 2019

Я пытаюсь создать многостраничный документ PDF.

Я делаю это, используя html2canvas для захвата JPEG каждой страницы. Каждый JPEG затем добавляется как новая страница в PDF. Суть кода ниже (вдохновение из этой статьи здесь ): 

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" на второй странице. Однако вместо этого я получаю PDF с содержимым элемента с id = "image_1" на ОБА первой и второй странице ...

Интересно, что-то перезаписывается / не записывается, но, с моей точки зрения, я не понимаю, как это будет происходить. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 22 мая 2019

Не уверен, почему вышеупомянутая вложенная структура обещания не работает.Я рефакторинг это к следующему и вижу успех.По сути, я создаю обещания для каждого элемента холста и добавляю их в 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")
    });
  };
...