docAppearance
Using Paged.js
If you don't know it already, browsers support for rendering beautiful PDFs from HTML can be pretty limited. It is near impossible to adjust the header to the content of the page and setting page breaks exactly as you want can be tricky. Some CSS standards were designed to help with that (like CSS Paged Media Module Level 3) but no browser natively supports it yet.
Luckily Paged.js came to our rescue ! It is a polyfill that helps the browser understand this long-awaited CSS. They will explain all this better than we can so be sure to visit their page and marvel at what they can do. They can surely help you with your project.
Getting the script
Doppio could automatically add Paged.js to your page before printing, but there are some use cases when this could break your page so we decided against it. It is better for you to add it yourself in your HTML document.
To add the polyfill, simply add this script tag to your HTML document, inside the head tag:
html
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
This script executes as soon as the document is loaded in the browser. To make sure it has time to execute before printing, add the following option to your request body :
json
{
"page": {
"pdf": {
"printBackground": true
},
"goto": {
"url": "https://your-url.com",
"options": {
"waitUntil": ["load"],
...
},
},
...
}
}
Working with async content
If your page needs content fetched after the initial document load, you might need to delay the execution of Paged.js until all your content has loaded. To achieve that, add a script to disable the automatic execution on load.
html
<head>
...
<script>
window.PagedConfig = {
auto: false, // disable automatic script execution on document load
};
</script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
...
</head>
WARNING
Be sure to add this script before the Paged.js script tag, or add the defer option to it. Else Paged.js will execute before you have the chance to disable the automatic execution.
Then, when all your content has loaded, execute Paged.js
js
window.PagedPolyfill.preview();
INFO
All this is also explained on Paged.js npm readme. They also have other options which could be useful for your project.
Finally, remember to add networkidle0 in the waitUntil option to wait for the content before printing.
json
{
"page": {
"pdf": {
"printBackground": true
},
"goto": {
"url": "https://your-url.com",
"options": {
"waitUntil": ["load", "networkidle0"],
...
},
},
...
}
}
Other Paged.js articles on Doppio
Paged.js - Installation with React