[英]export html to pdf with multiple pages
I need to export few parts of the page to few different pages in pdf. 我需要将页面的几个部分导出到pdf中的几个不同页面。 When I use method save() outside html2canvas() func it returns empty pages, If I add it one of canvas functions it will return the content of this canvas.
当我在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 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>
if I put save() inside "html2canvas(data).then(canvas => {...})" function, I will get two pdf files with images of specified part of the page. 如果我将save()放在“ html2canvas(data).then(canvas => {...})”函数中,则会得到两个pdf文件,其中包含页面指定部分的图像。 How can I get these two parts in one pdf ?
如何将这两个部分合并为一个pdf?
I think this could be the solution and also a cleaner code: 我认为这可能是解决方案,而且代码更简洁:
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
}
EDIT: I also noticed that you're using mm
units for the PDF document if that works for you it's ok but I had a recent experience adding images to a PDF document and 'px' units served for my purpose slightly better. 编辑:我还注意到,如果对您有用,您正在使用PDF单位的
mm
单位,但是我最近有将图像添加到PDF文档中的经验,而“ px”单位为我的目的服务会更好。 Anyway if that works it's ok. 无论如何,如果可以的话。
EDIT 2: There is another answer explaining better what's the problem and why when you put pdf.save('dashboard.pdf')
method inside html2canvas
it works. 编辑2:还有另一个答案,可以更好地解释问题所在,为什么将
pdf.save('dashboard.pdf')
方法放入html2canvas
也有效。 Here is the link Getting image on page 1 of 2 page pdf 这是链接, 在第2页的第1页上获取图像pdf
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.