Angular 7 лучший способ экспортировать содержимое div в формате pdf с помощью html2canvas - PullRequest
Новая
       92

Angular 7 лучший способ экспортировать содержимое div в формате pdf с помощью html2canvas

0 голосов
/ 14 июля 2020

У меня возникла проблема с экспортом в pdf div с overflow-y на «auto».

Я использую html2canvas и jspdf для этого, но когда я нажимаю на экспорт, pdf сгенерировано, но только с видимой частью div. Я видел много ссылок с опцией scrollTo (0) раньше, но мне никогда не удавалось экспортировать все содержимое div.

мой компонент выглядит так: 

<div id="printreport">
   <app-first-part>
   <app-second-part>
   <app-third-part>
   <app-fourth-part>
</div

Есть ли способ экспортировать мой div (id = "printreport") с существующим стилем, в идеале с разделительной страницей в каждой части? Может быть, другое решение, чем html2canvas или jspdf? Реальная необходимость заключается в печати со стилями, а не в экспорте в pdf.

может быть, как печать только некоторых div, но как сохранить стиль в этом случае?

Спасибо за помощь и предложения!

Джефф

1 Ответ

0 голосов
/ 15 июля 2020

Наконец-то я нашел способ делать то, что хочу. вот ссылка, которая мне очень помогает! Html2canvas для каждого экспорта div в pdf отдельно

, в частности, ответ JpG.

вот мой последний код: 

 async printRapport() {
  this.spinnerService.showSpinner();

  const doc = new jspdf('l', 'mm', 'a4');
  const options = {
    pagesplit: true
  };
  const ids = document.querySelectorAll('[id]');
  console.log(ids);
  const length = ids.length;
  for (let i = 0; i < length; i++) {
    const bloc = document.getElementById(ids[i].id);
    // excute this function then exit loop
    await html2canvas(bloc, { scale: 1 }).then(function (canvas) {
      doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 10, 10, 277,canvas.height*0.2);
      if (i < (length - 1)) {
        doc.addPage();
      }
    });
  }
  // download the pdf with all charts
  doc.save('rapport_' + this.detailPanier.name.replace(/\s/g, '_') + '.pdf'); // Generated PDF*!/
  this.spinnerService.hideSpinner();
}

вы можете это отметить все div для печати должны иметь идентификатор в html.

Всем спасибо! Пока

...