[Read: Meet the 4 scale-ups using data to save the planet<\/span><\/a>]<\/em><\/p>\n If you are unfamiliar with the term headless browsers, it\u2019s simply a browser without a GUI. In that sense, a headless browser is simply just another browser that understands how to render HTML web pages and process JavaScript. Due to the lack of a GUI, the interactions with a headless browser take place over a command line.<\/p>\n Even though Puppeteer is mainly a headless browser, you can configure and use it as non-headless Chrome or Chromium.<\/p>\n Puppeteer\u2019s powerful browser-capabilities make it a perfect candidate for web app testing and web scraping.<\/p>\n To name a few use cases where Puppeteer provides the perfect functionalities for web developers,<\/p>\n You can use Puppeteer on the backend and frontend to generate PDFs. In this tutorial, we are using a Node backend for the task.<\/p>\n Initialize NPM and set up the usual Express server to get started with the tutorial.<\/p>\n <\/p>\n <\/span><\/p>\n Make sure to install the Puppeteer NPM package with the following command before you start.<\/p>\n <\/p>\n <\/span><\/p>\n Now we get to the exciting part of the tutorial. With Puppeteer, we only need a few lines of code to convert web pages into PDF.<\/p>\n First, create a browser instance using Puppeteer\u2019s <\/span> <\/p>\n <\/span><\/p>\n Then, we create a new page instance and visit the given page URL using Puppeteer.<\/p>\n <\/p>\n <\/span><\/p>\n We have set the <\/span> Finally, we create the PDF from the crawled page content and save it to our device.<\/p>\n <\/p>\n <\/span><\/p>\n The print to <\/span>PDF function<\/a> <\/span>is quite complicated and allows for a lot of customization, which is fantastic. Here are some of the options we used:<\/p>\n When the PDF creation is over, close the browser connection with <\/span> With the knowledge we gather so far, we can now create a new endpoint that will receive a URL as a query string, and then it will stream back to the client the generated PDF.<\/p>\n Here is the code:<\/p>\n <\/p>\n <\/span><\/p>\n If you start the server and visit the <\/span> URL example: <\/span> Which will generate the following PDF as it looks on the image:<\/p>\n That\u2019s it! You have completed the conversion of a web page to PDF. Wasn\u2019t that easy?<\/p>\n As mentioned, Puppeteer offers many customization options, so make sure you play around with the opportunities to get different results.<\/p>\n Next, we can change the viewport size to capture websites under different resolutions.<\/p>\n In the previously created PDF, we didn\u2019t specify the viewport size for the web page Puppeteer is visiting, instead used the default viewport size, 800\u00d7600px.<\/p>\n However, we can precisely set the page\u2019s viewport size before crawling the page.<\/p>\n <\/p>\n <\/span><\/p>\n In today\u2019s tutorial, we used Puppeteer, a Node API for headless Chrome, to generate a PDF of a given web page. Since you are now familiar with the basics of Puppeteer, you can use this knowledge in the future to create PDFs or even for other purposes like web scraping and UI testing.<\/p>\n This <\/span><\/i>article<\/span><\/i><\/a> was originally published on <\/span><\/i>Live Code Stream<\/span><\/i><\/a> by <\/span><\/i>Juan Cruz Martinez<\/span><\/i><\/a> (twitter: <\/span><\/i>@bajcmartinez<\/span><\/i><\/a>), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.<\/span><\/i><\/p>\nWhat is a headless browser?<\/h3>\n
What can you do with Puppeteer?<\/h3>\n
\n
Set up the project environment<\/h2>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.03.png\")
<\/figure>\n![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.05.png\")
<\/figure>\nConvert web pages to PDF<\/h2>\n
launch<\/code> <\/span>function.<\/p>\n![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55.png\")
<\/figure>\n![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.58.png\")
<\/figure>\nwaitUntil<\/code> <\/span>option to <\/span>networkidle0<\/code>. When we use <\/span>networkidle0<\/code> <\/span>option, Puppeteer waits until there are no new network connections within the last 500 ms. It is a way to determine whether the site has finished loading. It\u2019s not exact, and Puppeteer offers other options, but it is one of the most reliable for most cases.<\/p>\n![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.53.36.png\")
<\/figure>\n\n
browser.close()<\/code>.<\/p>\nBuild an API to generate and respond PDFs from URLs<\/h2>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.11.png\")
<\/figure>\n\/pdf<\/code> <\/span>route, with a <\/span>target<\/code> <\/span>query param containing the URL we want to convert. The server will serve the generated PDF directly without ever storing it on disk.<\/p>\nhttp:\/\/localhost:3000\/pdf?target=https:\/\/google.com<\/code><\/p>\n![](\"https:\/\/livecodestream.dev\/post\/convert-web-pages-into-pdfs-with-puppeteer-and-nodejs\/resulting-pdf_hu9a429796f97b32aa78a0e7af898769fa_221035_700x0_resize_box_2.png\")
Capture websites with different viewports<\/h2>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.56.png\")
<\/figure>\nConclusion<\/h2>\n