Currently, I am utilizing Puppeteer in order to create PDF files by using static HTML as the primary source:
const page = await browser.newPage();
await page.setContent(html); //the HTML content is retrieved from the file system
const pdf = await page.pdf({
format: 'A4',
printBackground: true,
preferCSSPageSize: true
});
The same HTML content is made visible to the users on the front-end of my application so that they have a precise preview of the content before downloading the PDF.
To ensure that the size matches an A4 paper sheet, I am implementing CSS to adjust the width and height of the <body> tag in the HTML, while taking into consideration the margins.
For instance, the CSS styling may appear as follows:
@page {
margin: 1cm; //instructs Puppeteer to incorporate a 1cm margin for printing the PDF
}
body {
width: 19cm; // (21cm width minus 1cm margin on each side)
height: 27.7cm // (29.7cm height minus 1cm margin top and bottom)
}
An issue that has arisen pertains to page breaks; at times, Puppeteer separates the lower content onto additional pages.
Here is how the HTML displays the lower section of the A4 page which the end-user visualizes.
Even though there seems to be adequate space for the final text row, it doesn't get cropped off.
However, when printed to PDF via Puppeteer, this is what happens:
In essence, the text gets distributed across two separate pages.
This fluctuating behavior is somewhat puzzling; occasionally, with varying paragraph lengths or text, the splitting of content across pages does not occur.
If you happen to know why Puppeteer exhibits this text-splitting behavior, I would greatly appreciate any insights or potential solutions as my exploration through the documentation has not yielded results thus far.
Thank you!