{"id":151151,"date":"2021-01-10T09:00:16","date_gmt":"2021-01-10T06:00:16","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/"},"modified":"2021-01-10T09:00:16","modified_gmt":"2021-01-10T06:00:16","slug":"how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/","title":{"rendered":"#How to turn web pages into PDFs with Puppeteer and NodeJS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a29bf29988e0\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a29bf29988e0\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#What_is_Puppeteer_and_why_is_it_awesome\" >What is Puppeteer, and why is it awesome?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#What_is_a_headless_browser\" >What is a headless browser?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#What_can_you_do_with_Puppeteer\" >What can you do with Puppeteer?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#Set_up_the_project_environment\" >Set up the project environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#Convert_web_pages_to_PDF\" >Convert web pages to PDF<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#Build_an_API_to_generate_and_respond_PDFs_from_URLs\" >Build an API to generate and respond PDFs from URLs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#Capture_websites_with_different_viewports\" >Capture websites with different viewports<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#How to turn web pages into PDFs with Puppeteer and NodeJS<\/strong>&#8221;<\/p>\n<div>\n                            As a web developer, you may have wanted to generate a PDF file of a web page to share with your clients, use it in presentations, or add it as a new feature in your web <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>. No matter your reason, Puppeteer, Google\u2019s Node API for headless Chrome and Chromium, makes the task quite simple for you.<\/p>\n<p>In this tutorial, we will see how to convert web pages into PDF with Puppeteer and Node.js. Let\u2019s start the work with a quick introduction to what Puppeteer is.<\/p>\n<h2 id=\"what-is-puppeteer-and-why-is-it-awesome\"><span class=\"ez-toc-section\" id=\"What_is_Puppeteer_and_why_is_it_awesome\"><\/span>What is Puppeteer, and why is it awesome?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In Google\u2019s own words,<span>\u00a0<\/span><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/puppeteer\/puppeteer\">Puppeteer<\/a><span>\u00a0<\/span>is, \u201cA Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol.\u201d<\/p>\n<p><em>[Read:\u00a0<span dir=\"auto\">Meet the 4 scale-ups using data to save the planet<\/span>]<\/em><\/p>\n<h3 id=\"what-is-a-headless-browser\"><span class=\"ez-toc-section\" id=\"What_is_a_headless_browser\"><\/span>What is a headless browser?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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<p>Even though Puppeteer is mainly a headless browser, you can configure and use it as non-headless Chrome or Chromium.<\/p>\n<h3 id=\"what-can-you-do-with-puppeteer\"><span class=\"ez-toc-section\" id=\"What_can_you_do_with_Puppeteer\"><\/span>What can you do with Puppeteer?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Puppeteer\u2019s powerful browser-capabilities make it a perfect candidate for web app testing and web scraping.<\/p>\n<p>To name a few use cases where Puppeteer provides the perfect functionalities for web developers,<\/p>\n<ul>\n<li>Generate PDFs and screenshots of web pages<\/li>\n<li>Automate form submission<\/li>\n<li>Scrape web pages<\/li>\n<li>Perform automated UI tests while keeping the test environment up-to-date.<\/li>\n<li>Generating pre-rendered content for Single Page Applications (SPAs)<\/li>\n<\/ul>\n<h2 id=\"set-up-the-project-environment\"><span class=\"ez-toc-section\" id=\"Set_up_the_project_environment\"><\/span>Set up the project environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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<p>Initialize NPM and set up the usual Express server to get started with the tutorial.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1333471 lazy\" alt=\"\" width=\"934\" height=\"404\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.03.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.03.png 934w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.03-280x121.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.03-540x234.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.03-270x117.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.03-796x344.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>Make sure to install the Puppeteer NPM package with the following command before you start.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1333472 lazy\" alt=\"\" width=\"924\" height=\"126\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.05.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.05.png 924w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.05-280x38.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.05-540x74.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.05-270x37.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.05-796x109.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<h2 id=\"convert-web-pages-to-pdf\"><span class=\"ez-toc-section\" id=\"Convert_web_pages_to_PDF\"><\/span>Convert web pages to PDF<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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<p>First, create a browser instance using Puppeteer\u2019s<span>\u00a0<\/span><code>launch<\/code><span>\u00a0<\/span>function.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1333473 lazy\" alt=\"\" width=\"922\" height=\"124\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55.png 922w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55-280x38.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55-540x73.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55-270x36.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55-796x107.png 796w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.55-912x124.png 912w\"\/><\/figure>\n<p><\/span><\/p>\n<p>Then, we create a new page instance and visit the given page URL using Puppeteer.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1333474 lazy\" alt=\"\" width=\"936\" height=\"400\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.58.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.58.png 936w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.58-280x120.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.58-540x231.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.58-270x115.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.52.58-796x340.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>We have set the<span>\u00a0<\/span><code>waitUntil<\/code><span>\u00a0<\/span>option to<span>\u00a0<\/span><code>networkidle0<\/code>. When we use<span>\u00a0<\/span><code>networkidle0<\/code><span>\u00a0<\/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<p>Finally, we create the PDF from the crawled page content and save it to our device.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1333475 lazy\" alt=\"\" width=\"922\" height=\"666\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.53.36.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.53.36.png 922w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.53.36-280x202.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.53.36-374x270.png 374w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.53.36-187x135.png 187w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.53.36-796x575.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>The print to<span>\u00a0<\/span><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/puppeteer\/puppeteer\/blob\/v5.5.0\/docs\/api.md#pagepdfoptions\">PDF function<\/a><span>\u00a0<\/span>is quite complicated and allows for a lot of customization, which is fantastic. Here are some of the options we used:<\/p>\n<ul>\n<li>\n<strong>printBackground<\/strong>: When this option is set to true, Puppeteer prints any background colors or images you have used on the web page to the PDF.<\/li>\n<li>\n<strong>path<\/strong>: Path specifies where to save the generated PDF file. You can also store it into a memory stream to avoid writing to disk.<\/li>\n<li>\n<strong>format<\/strong>: You can set the PDF format to one of the given options: Letter, A4, A3, A2, etc.<\/li>\n<li>\n<strong>margin<\/strong>: You can specify a margin for the generated PDF with this option.<\/li>\n<\/ul>\n<p>When the PDF creation is over, close the browser connection with<span>\u00a0<\/span><code>browser.close()<\/code>.<\/p>\n<h2 id=\"build-an-api-to-generate-and-respond-pdfs-from-urls\"><span class=\"ez-toc-section\" id=\"Build_an_API_to_generate_and_respond_PDFs_from_URLs\"><\/span>Build an API to generate and respond PDFs from URLs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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<p>Here is the code:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1333476 lazy\" alt=\"\" width=\"710\" height=\"1322\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.11.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.11.png 710w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.11-113x210.png 113w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.11-145x270.png 145w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.11-73x135.png 73w\"\/><\/figure>\n<p><\/span><\/p>\n<p>If you start the server and visit the<span>\u00a0<\/span><code>\/pdf<\/code><span>\u00a0<\/span>route, with a<span>\u00a0<\/span><code>target<\/code><span>\u00a0<\/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>\n<p>URL example:<span>\u00a0<\/span><code>http:\/\/localhost:3000\/pdf?target=https:\/\/google.com<\/code><\/p>\n<p>Which will generate the following PDF as it looks on the image:<\/p>\n<figure class=\"\" data-src=\"https:\/\/thenextweb.com\/post\/convert-web-pages-into-pdfs-with-puppeteer-and-nodejs\/resulting-pdf_hu9a429796f97b32aa78a0e7af898769fa_221035_700x0_resize_box_2.png\">\n<figure class=\"post-image post-mediaBleed aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"lazy loaded lazy\" alt=\"\" width=\"700\" height=\"601\" src=\"https:\/\/livecodestream.dev\/post\/convert-web-pages-into-pdfs-with-puppeteer-and-nodejs\/resulting-pdf_hu9a429796f97b32aa78a0e7af898769fa_221035_700x0_resize_box_2.png\" data-lazy=\"true\"\/><figcaption><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thenextweb.com\/syndication\/2021\/01\/10\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/#\" data-url=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fthenextweb.com%2Fsyndication%2F2021%2F01%2F10%2Fhow-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs%2F&amp;via=thenextweb&amp;related=thenextweb&amp;text=Check out this picture on: Sample PDF capture\" data-title=\"Share Sample PDF capture on Twitter\" data-width=\"685\" data-height=\"500\" class=\"post-image-share popitup\" title=\"Share Sample PDF capture on Twitter\"><i class=\"icon icon--inline icon--twitter--dark\"\/><\/a>Sample PDF capture<\/figcaption><\/figure>\n<\/p>\n<\/figure>\n<p>That\u2019s it! You have completed the conversion of a web page to PDF. Wasn\u2019t that easy?<\/p>\n<p>As mentioned, Puppeteer offers many customization options, so make sure you play around with the opportunities to get different results.<\/p>\n<p>Next, we can change the viewport size to capture websites under different resolutions.<\/p>\n<h2 id=\"capture-websites-with-different-viewports\"><span class=\"ez-toc-section\" id=\"Capture_websites_with_different_viewports\"><\/span>Capture websites with different viewports<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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<p>However, we can precisely set the page\u2019s viewport size before crawling the page.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1333477 lazy\" alt=\"\" width=\"706\" height=\"276\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.56.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.56.png 706w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.56-280x109.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.56-540x211.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/Screenshot-2021-01-08-at-10.54.56-270x106.png 270w\"\/><\/figure>\n<p><\/span><\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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<p><i><span style=\"font-weight: 400;\">This <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/post\/convert-web-pages-into-pdfs-with-puppeteer-and-nodejs\/\"><i><span style=\"font-weight: 400;\">article<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> was originally published on <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/\"><i><span style=\"font-weight: 400;\">Live Code Stream<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> by <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/bajcmartinez\/\"><i><span style=\"font-weight: 400;\">Juan Cruz Martinez<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> (<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">twitter<\/a>: <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/bajcmartinez\"><i><span style=\"font-weight: 400;\">@bajcmartinez<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.<\/span><\/i><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/subscribe\"><i><span style=\"font-weight: 400;\">Live Code Stream<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> is also available as a free weekly <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">news<\/a>letter. Sign up for updates on everything related to programming, AI, and computer <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/sciencee\/\" data-internallinksmanager029f6b8e52c=\"5\" title=\"Science\" target=\"_blank\" rel=\"noopener\">science<\/a> in <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>.<\/span><\/i><\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong>\n<\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/thenextweb.com\/syndication\/2021\/01\/10\/how-to-turn-web-pages-into-pdfs-with-puppeteer-and-nodejs\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to turn web pages into PDFs with Puppeteer and NodeJS&#8221; As a web developer, you may have wanted to generate a PDF file of a web page to share with your clients, use it in presentations, or add it as a new feature in your web app. No matter your reason, Puppeteer, Google\u2019s Node&#8230;<\/p>\n","protected":false},"author":1,"featured_media":151152,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/img-cdn.tnwcdn.com\/image\/tnw?filter_last=1&fit=1280,640&url=https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/01\/1-copy-12.jpg&signature=a506cdbf931f1bf2afc1c10d130c807f","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[88988,88990,75083,88989,88987,88986,70759,73708],"class_list":["post-151151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-chrome","tag-conversion-marketing","tag-developer","tag-file-format","tag-node-js","tag-portable-document-format","tag-tech","tag-web-scraping"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/151151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=151151"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/151151\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/151152"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=151151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=151151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=151151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}