html2canvs как использовать l oop или использовать для нескольких элементов div / html dom - PullRequest
Новая
       20

html2canvs как использовать l oop или использовать для нескольких элементов div / html dom

0 голосов
/ 18 февраля 2020

Я пытаюсь использовать html2canvas, интегрирующийся с jspdf, для печати нескольких вкладок. 

  printTabsManual() {
    let tabs = document.querySelectorAll('*[id^="GRID_ID-pane"]');
    console.log(tabs.length);
    //const pdf = new jsPDF();
    //console.log(max_h);
    //console.log(max_w);
    let pdf = new jsPDF('l', 'px', [max_h, max_w]);
    for (i = 0; i < tabs.length; i++) {
      html2canvas(tabs[i])
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        pdf.addImage(imgData, 'JPEG', 0, 0);
      });
    }
    pdf.save("Download.pdf");
  }

Я могу получить div вкладки с помощью селектора запросов, и этот код без l oop действительно работает Хорошо, если вы имеете дело с одним div, но он ломается или, возможно, реализация не подходит для многократного цикла.

Я попытался просмотреть журналы, он не может получить изображение для div второй вкладки.

Не уверен, где я понял это неправильно.

1 Ответ

1 голос
/ 18 февраля 2020

l oop, выполняющий асинхронную c операцию ... Я полагаю, что вы не намерены выполнять все ваши асин c задачи и только затем продолжить ... так что ... давайте использовать Promise.all для этой цели : 

const tasks = tabs.map(tab => html2canvas(tab))

Promise.all(tasks).then(canvases =>
{
   for (const canvas of canvases)
   {
       const imgData = canvas.toDataURL('image/png');
       pdf.addImage(imgData, 'JPEG', 0, 0);
   }

   pdf.save("Download.pdf");
})

Что означает: выполнить все асинхронные c задачи, затем манипулировать их результатами и сохранять pdf

...