Pages
Generated PDFs require various controls such as size, orientation, and page breaks. This page explains how to implement these features.
Size
PDF size can be specified using either the format property or width and height properties in the pdfOptions object.
For details, see PDF Options.
Example: A3
Here's an example of generating an A3 size (420mm × 297mm) PDF. The font size is set to 40mm.
{
"pdfOptions": {
"format": "A3" /* Specify A3 size */
},
"html": '
<html>
<head>
<style>
h1 { font-size: 40mm; }
</style>
</head>
<body>
<h1>Page</h1>
</body>
</html>'
}
Example: A5
Here's an example of generating an A5 size (148mm × 210mm) PDF. While using the same font size as the A3 example, it appears relatively larger due to the smaller page size.
{
"pdfOptions": {
"format": "A5" /* Specify A5 size */
},
"html": '
<html>
<head>
<style>
h1 { font-size: 40mm; } /* Same font size as A3 example */
</style>
</head>
<body>
<h1>Page</h1>
</body>
</html>'
}
Landscape
By default, PDFs are generated in portrait orientation. Set the landscape property to true to switch to landscape orientation.
{
"pdfOptions": {
"format": "A5",
"landscape": true /* Set to landscape */
},
"html": '
<html>
<head>
<style>
h1 { font-size: 40mm; }
</style>
</head>
<body>
<h1>Page</h1>
</body>
</html>'
}
Multiple Pages
Automatic Page Breaks
When content exceeds the specified page size, it automatically breaks into multiple pages. In the following example, long text is automatically split across A5-sized pages.
{
"pdfOptions": {
"format": "A5"
},
"html": '
<html>
<head>
<style>
p { font-size: 10mm; }
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet... /* Long text content */
</p>
</body>
</html>'
}
No Page Breaks
You can prevent page breaks by explicitly specifying the page size. The following example generates a single long PDF by specifying A5 width (148mm) and double its height (420mm).
{
"pdfOptions": {
"width": "148mm", /* A5 width */
"height": "420mm" /* Double A5 height */
},
"html": '
<html>
<head>
<style>
p { font-size: 10mm; }
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet... /* Long text content */
</p>
</body>
</html>'
}
Custom Page Breaks
You can create page breaks at specific positions by specifying page sizes in CSS. In the following example, two div elements are set to A4 size with different background colors.
{
"pdfOptions": {
"format": "A4", /* Specify A4 size */
"printBackground": true /* Required to show background colors */
},
"html": '
<html>
<head>
<style>
body { margin: 0; padding: 0; }
.page { width: 210mm; height: 297mm; } /* A4 size */
.page1 { background-color: #d9f99d; } /* Light green background */
.page2 { background-color: #a5f3fc; } /* Light blue background */
h1 { font-size: 40mm; }
</style>
</head>
<body>
<div class="page page1">
<h1>Page 1</h1>
</div>
<div class="page page2">
<h1>Page 2</h1>
</div>
</body>
</html>'
}