javascript - 将 html 导出为多页 pdf

Question

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