Use cases for rendering HTML
There are many use cases when rendering HTML is proper:
- generate bills, receipts, or invoices PDF or PNG files from the HTML templates;
- dynamically create images for the Open Graph protocol;
- generate marketing images at scale from templates;
- create images for essays and writings to share on social networks;
- make images for ads from the HTML templates;
- and many more.
And it is super easy to do with Puppeteer.
Render HTML with Puppeteer
Puppeteer has a method
page.setContent(html, options) to render HTML, it is easy and convenient to use. But don’t forget to install the Puppeteer library:
And then, try it:
The result is predictable:
In case if your HTML contains links to externals resources like styles, scripts, fonts, or other kind of external resources, you can specify timeout and wain until “event”:
Always specify a timeout to make sure that the request does not hang. And you can specify the
load— consider navigation to be finished when the load event is fired;
domcontentloaded— consider navigation to be finished when the DOMContentLoaded event is fired.
networkidle0— think navigation to be finished when there are no more than 0 network connections for at least 500 ms.
networkidle2— think navigation to be finished when there are no more than 2 network connections for at least 500 ms.
The difference between
networkidle2 in its essence is:
networkidle0comes in handy for SPAs that load resources with fetch requests;
networkidle2comes in handy for pages that do long-polling or any other side activity.
Using html2canvas library
In case you need to render HTML or to take screenshots right at the client-side, in the browser, there is a magic library html2canvas. The library traverses the given HTML and renders in the canvas.
It is very easy to use. Install it:
And then use:
The beauty of the library is that you can take a screenshot of the page or render HTML to canvas and then images right in the browser. The downside is that library output might differ from the actual output. And it might miss the latest CSS features. So, you use it at your own risk. But for simple HTML, it should be enough.
Using API to render HTML
Using API is better when you have large volumes to take screenshots. In this case, you don’t need to be afraid that you can handle them and tweak Puppeteer. Or you want to make sure that you always render with the latest version of the browser.
If you don’t want to set up and manage Puppeteer, you can use our scalable and reliable API to render PDF or images from HTML. It supports native libraries to take screenshots for many languages
And now look how simple it is to render HTML:
The result is the same as using Puppeteer:
I hope I helped you and have a nice day 👋
You also might find helpful: