Question

我需要将页面的几个部分导出到pdf中的几个不同页面。当我在html2canvas（）函数外部使用save（）方法时，它将返回空页面，如果将其添加到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文件？

Answer 1

我认为这可能是解决方案，而且代码更简洁：

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内可以起作用。这是链接Getting image on page 1 of 2 page pdf

将HTML导出为多页pdf

1 个答案: