экспорт HTML в PDF с несколькими страницами - PullRequest
Новая
       4

экспорт HTML в PDF с несколькими страницами

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

Мне нужно экспортировать несколько частей страницы на несколько разных страниц в формате PDF.Когда я использую метод save () вне функции html2canvas (), он возвращает пустые страницы. Если я добавлю его в одну из функций canvas, он вернет содержимое этого холста. 

const pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
let data = document.querySelector('.first-page');
html2canvas(data).then(canvas => {
  const imgWidth = 208;
  const imgHeight = canvas.height * imgWidth / canvas.width;

  const contentDataURL = canvas.toDataURL('image/png');
  const position = 0;
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
});

pdf.addPage();

data = document.querySelector('.second-page');
html2canvas(data).then(canvas => {
  const imgWidth = 208;
  const imgHeight = canvas.height * imgWidth / canvas.width;

  const contentDataURL = canvas.toDataURL('image/png');
  const position = 0;
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
});

pdf.save('dashboard.pdf'); // Generated PDF

html 

<div class="adscale-table">
  <div class="first-page">
    <dashboard-platforms id="platforms-section"></dashboard-platforms>
  </div>
  <div class="d-flex flex-column second-page">
    <div class="d-flex mb-4">
      <dashboard-performance-by-device id="performance-by-device-section" class="col-xl-6"></dashboard-performance-by-device>
      <dashboard-performance-by-location id="performance-by-location-section" class="col-xl-6"></dashboard-performance-by-location>
    </div>
    <div class="d-flex">
      <dashboard-bar-widget *ngIf="gendersData; else loader" class="col-xl-6" id="performance-gender-section"
                            title="Performance by Gender" [height]="300" [currency]="customerCurrency"
                            [metricSettings]="metricsSettings" [allData]="gendersData">
      </dashboard-bar-widget>
      <dashboard-bar-widget *ngIf="agesData; else loader" class="col-xl-6" id="performance-age-section"
                            title="Performance by Age" [height]="300" [currency]="customerCurrency"
                            [metricSettings]="metricsSettings" [allData]="agesData">
      </dashboard-bar-widget>
    </div>
  </div>
</div>

если я добавлю save () в функцию "html2canvas (data) .then (canvas => {...})", я получу два файла pdf с изображениями указанной части страницы.Как я могу получить эти две части в одном файле PDF

1 Ответ

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

Я думаю, что это может быть решением, а также более чистым кодом: 

async function printDocument() {
  const pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
  const imgWidth = 208;
  const position = 0;

  let page1 = document.querySelector('.first-page');
  let page1 = document.querySelector('.second-page');
  const [imgPage1, imgPage2] = await Promise.all([html2canvas(page1), html2canvas(page2)]);
  // Process first image
  let imgHeight = imgPage1.height * imgWidth / imgPage1.width;
  let contentDataURL = imgPage1.toDataURL('image/png');
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
  pdf.addPage();
  // Process second image
  imgHeight = imgPage2.height * imgWidth / imgPage2.width;
  contentDataURL = imgPage2.toDataURL('image/png');
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);

  pdf.save('dashboard.pdf'); // Generated PDF
}

РЕДАКТИРОВАТЬ: Я также заметил, что вы используете mm единиц для документа PDF, еслиэто работает для вас, это нормально, но у меня был недавний опыт добавления изображений в PDF-документ, и единицы измерения 'px' служили для моей цели немного лучше.В любом случае, если это работает, это нормально.

РЕДАКТИРОВАТЬ 2: Есть другой ответ, объясняющий лучше, в чем проблема и почему, когда вы помещаете метод pdf.save('dashboard.pdf') в html2canvas, он работает.Вот ссылка Получение изображения на стр. 1 из 2 стр. Pdf

...