{"id":1106,"date":"2022-03-30T15:38:19","date_gmt":"2022-03-30T15:38:19","guid":{"rendered":"https:\/\/www.ubercompute.com\/blog\/?p=1106"},"modified":"2022-12-29T04:43:34","modified_gmt":"2022-12-29T04:43:34","slug":"convert-multi-page-html-to-pdf-document","status":"publish","type":"post","link":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/","title":{"rendered":"Easiest Way to Convert multi-page HTML to PDF Document"},"content":{"rendered":"\n<p>There are many ways to generate PDFs in Nodejs using various popular PDFs libraries like jsPDF, pdf-lib, pdfmake, pdfkit, etc. These libraries are best to generate PDFs when you were supposed to create a PDF design template from scratch. But what you will do if you had already created these design templates in HTML? will you consider converting the HTML templates to these library-supported template design formats? are you just willing to convert this HTML markup directly to PDF? if your answer is Yes then this article is for you.<\/p>\n\n\n\n<p>In this article, I&#8217;m going to show you, How you can convert HTML to PDF using Puppeteer, which is capable of generating single-page as well as multi-page PDFs without breaking HTML elements. <\/p>\n\n\n\n<p>The generated PDFs appearance will be as same as the HTML web page, and you also do not need to modify or rewrite HTML markups and import fonts and assets separately for print.<\/p>\n\n\n\n<div class=\"ad-card ad-x\">\n                   <!-- Uber-card -->\n                    <ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-2146900317429219\" data-ad-slot=\"3276046868\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n                    <script>\n                         (adsbygoogle = window.adsbygoogle || []).push({});\n                    <\/script>\n              <\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Puppeteer is a Node library that provides a high-level API to control Chrome and Chromium by DevTools Protocol. It runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.<\/p>\n<cite>pptr.dev<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Requirements<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<a href=\"https:\/\/www.ubercompute.com\/blog\/go\/linode-cloud\/\" target=\"_top\" rel=\"nofollow noopener\" id=\"939241\"><img fetchpriority=\"high\" decoding=\"async\" src=\"\/\/a.impactradius-go.com\/display-ad\/10906-939241\" border=\"0\" alt=\"\" width=\"300\" height=\"250\"\/><\/a><img decoding=\"async\" height=\"0\" width=\"0\" src=\"https:\/\/imp.pxf.io\/i\/1202663\/939241\/10906\" style=\"position:absolute;visibility:hidden;\" border=\"0\" \/>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node run time ( Local or Cloud )<\/li>\n\n\n\n<li>ExpressJs<\/li>\n\n\n\n<li>Puppeteer<\/li>\n<\/ul>\n\n\n\n<p>These are the basic requirements for creating a HTML to PDF print server.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-bash\">npm init -y\nnpm i express puppeteer<\/code><\/pre>\n\n\n\n<p>After creating a new nodejs project and installing the expressjs and puppeteer library into the project, you just need to create three files <code>server.js, lib\/pdfGenerator.js, views\/invoice.ejs<\/code> which is given below :<\/p>\n\n\n\n<p><strong>.\/server.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const express = require(&quot;express&quot;);\nconst pdfGenerator = require(&quot;.\/lib\/pdfGenerator&quot;);\n\nconst server = express();\nconst port = 3000;\n\n\/\/ &#039;....&#039;\n\n\/\/ Set up View Engine\nserver.set(&#039;view engine&#039;, &#039;ejs&#039;);\nserver.set(&#039;views&#039;, __dirname + &#039;\/views&#039;);\n\n\/\/ Set up V1 routes\nserver.get(&#039;\/&#039;, async (req, res) =&gt; {\n    const pdf = await pdfGenerator(&#039;http:\/\/localhost:3000\/invoice&#039;);\n    res.json({\n        status: &#039;success&#039;,\n        path: pdf\n    })\n\n});\n\nserver.get(&#039;\/invoice&#039;, async (req, res) =&gt; {\n    res.render(&#039;invoice&#039;)\n\n});\n\n\n\/\/ eslint-disable-next-line import\/prefer-default-export\ntry {\n    server.listen(port, () =&gt; {\n        console.log(`Connected successfully on port ${port}`);\n    });\n} catch (error) {\n    console.error(`Error occured: ${error.message}`);\n}<\/code><\/pre>\n\n\n\n<p>In the above snippet, You just need to create an expressjs server script with two GET routes, which are <code>\/invoice<\/code> used for invoice view and<code> \/ <\/code>used generating PDF.<\/p>\n\n\n\n<div class=\"ad-card ad-x\">\n                   <!-- Uber-card -->\n                    <ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-2146900317429219\" data-ad-slot=\"3276046868\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n                    <script>\n                         (adsbygoogle = window.adsbygoogle || []).push({});\n                    <\/script>\n              <\/div>\n\n\n\n<p><strong>.\/views\/invoice.ejs<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks contain-height\"><code class=\"language-markup\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; \/&gt;\n    &lt;title&gt;PDF Print - Ubercompute&lt;\/title&gt;\n     &lt;link href=https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css rel=stylesheet&gt;\n     &lt;link href=https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css rel=stylesheet&gt;\n     &lt;script src=https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js&gt;&lt;\/script&gt;\n    &lt;style&gt;\n      body{background-color:#eee}.invoice-card{margin-top:5rem}.invoice-container{break-after:page}.fs-12{font-size:12px}.fs-15{font-size:15px}.name{margin-bottom:-2px}.product-details{margin-top:13px}\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body\n    class=&quot;snippet-body&quot;\n  &gt;\n    &lt;div class=&quot;container mt-5 mb-5&quot;&gt;\n      &lt;% [...Array(4).keys()].forEach((_, index) =&gt; { %&gt;\n          &lt;div class=&quot;d-flex justify-content-center row invoice-container&quot;&gt;\n        &lt;div class=&quot;col-md-12 invoice-card&quot;&gt;\n          &lt;div class=&quot;receipt bg-white p-3 rounded&quot;&gt;\n            &lt;img src=https:\/\/i.imgur.com\/zCAnG06.png width=120&gt;\n            &lt;h4 class=&quot;mt-2 mb-3&quot;&gt;Your order is confirmed!&lt;\/h4&gt;\n            &lt;h6 class=name&gt;Hello John,&lt;\/h6&gt;\n            &lt;span class=&quot;fs-12 text-black-50&quot;&gt;your order has been confirmed and will be shipped in two\n              days&lt;\/span&gt;\n            &lt;hr&gt;\n            &lt;div class=&quot;d-flex flex-row justify-content-between align-items-center order-details&quot;&gt;\n              &lt;div&gt;\n                &lt;span class=&quot;d-block fs-12&quot;&gt;Order date&lt;\/span&gt;&lt;span class=font-weight-bold&gt;12 March 2020&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span class=&quot;d-block fs-12&quot;&gt;Order number&lt;\/span&gt;&lt;span class=font-weight-bold&gt;OD44434324-&lt;%index%&gt;&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span class=&quot;d-block fs-12&quot;&gt;Payment method&lt;\/span&gt;&lt;span class=font-weight-bold&gt;Credit card&lt;\/span&gt;&lt;img class=&quot;ml-1 mb-1&quot; src=https:\/\/i.imgur.com\/ZZr3Yqj.png width=20&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span class=&quot;d-block fs-12&quot;&gt;Shipping Address&lt;\/span&gt;&lt;span class=&quot;font-weight-bold text-success&quot;&gt;New Delhi&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;hr&gt;\n            &lt;div class=&quot;d-flex justify-content-between align-items-center product-details&quot;&gt;\n              &lt;div class=&quot;d-flex flex-row product-name-image&quot;&gt;\n                &lt;img class=rounded src=https:\/\/i.imgur.com\/GsFeDLn.jpg width=80&gt;\n                &lt;div class=&quot;d-flex flex-column justify-content-between ml-2&quot;&gt;\n                  &lt;div&gt;\n                    &lt;span class=&quot;d-block font-weight-bold p-name&quot;&gt;Ralco formal shirts for men&lt;\/span&gt;&lt;span class=fs-12&gt;Clothes&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;span class=fs-12&gt;Qty: 1pcs&lt;\/span&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n              &lt;div class=product-price&gt;\n                &lt;h5&gt;$70&lt;\/h5&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;d-flex justify-content-between align-items-center product-details&quot;&gt;\n              &lt;div class=&quot;d-flex flex-row product-name-image&quot;&gt;\n                &lt;img class=rounded src=https:\/\/i.imgur.com\/b7Ve3fJ.jpg width=80&gt;\n                &lt;div class=&quot;d-flex flex-column justify-content-between ml-2&quot;&gt;\n                  &lt;div&gt;\n                    &lt;span class=&quot;d-block font-weight-bold p-name&quot;&gt;Ralco formal Belt for men&lt;\/span&gt;&lt;span class=fs-12&gt;Accessories&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;span class=fs-12&gt;Qty: 1pcs&lt;\/span&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n              &lt;div class=product-price&gt;\n                &lt;h6&gt;$50&lt;\/h6&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;mt-5 amount row&quot;&gt;\n              &lt;div class=&quot;d-flex justify-content-center col-md-6&quot;&gt;\n                &lt;img src=https:\/\/i.imgur.com\/AXdWCWr.gif width=250 height=100&gt;\n              &lt;\/div&gt;\n              &lt;div class=col-md-6&gt;\n                &lt;div class=billing&gt;\n                  &lt;div class=&quot;d-flex justify-content-between&quot;&gt;\n                    &lt;span&gt;Subtotal&lt;\/span&gt;&lt;span class=font-weight-bold&gt;$120&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div class=&quot;d-flex justify-content-between mt-2&quot;&gt;\n                    &lt;span&gt;Shipping fee&lt;\/span&gt;&lt;span class=font-weight-bold&gt;$15&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div class=&quot;d-flex justify-content-between mt-2&quot;&gt;\n                    &lt;span&gt;Tax&lt;\/span&gt;&lt;span class=font-weight-bold&gt;$5&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div class=&quot;d-flex justify-content-between mt-2&quot;&gt;\n                    &lt;span class=text-success&gt;Discount&lt;\/span&gt;&lt;span class=&quot;font-weight-bold text-success&quot;&gt;$25&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;hr&gt;\n                  &lt;div class=&quot;d-flex justify-content-between mt-1&quot;&gt;\n                    &lt;span class=font-weight-bold&gt;Total&lt;\/span&gt;&lt;span class=&quot;font-weight-bold text-success&quot;&gt;$165&lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;span class=d-block&gt;Expected delivery date&lt;\/span&gt;&lt;span class=&quot;font-weight-bold text-success&quot;&gt;12 March 2020&lt;\/span&gt;&lt;span class=&quot;d-block mt-3 text-black-50 fs-15&quot;&gt;We will be sending a shipping confirmation email when the item is\n              shipped!&lt;\/span&gt;\n            &lt;hr&gt;\n            &lt;div class=&quot;d-flex justify-content-between align-items-center footer&quot;&gt;\n              &lt;div class=thanks&gt;\n                &lt;span class=&quot;d-block font-weight-bold&quot;&gt;Thanks for shopping&lt;\/span&gt;&lt;span&gt;Amazon team&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;d-flex flex-column justify-content-end align-items-end&quot;&gt;\n                &lt;span class=&quot;d-block font-weight-bold&quot;&gt;Need Help?&lt;\/span&gt;&lt;span&gt;Call - 974493933&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;% }) %&gt;\n    &lt;\/div&gt;\n    &lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.bundle.min.js&quot; &gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>The above ejs markup further compiles to the HTML and produces a markup of four invoices. If you want to break a page after a certain element then do not forget to attach  <code>break-after: page;<\/code> style rules to that element.<\/p>\n\n\n\n<p><strong>.\/lib\/pdfGenerator.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const puppeteer = require(&quot;puppeteer&quot;)\n\nconst pdfGenerator = async (link) =&gt; {\n    const pdfPath = Date.now()\n    const browser = await puppeteer.launch({\n        headless: true,\n        args: [&#039;--no-sandbox&#039;, &#039;--disable-setuid-sandbox&#039;],\n    });\n    \n    const page = await browser.newPage();\n    await page.goto(link);\n    await page.emulateMediaType(&#039;screen&#039;); \/\/ to get media styles\n    await page.pdf({\n        format: &#039;a4&#039;,\n        printBackground: true,\n        path: `${pdfPath}.pdf`,\n    });\n    await browser.close();\n    return `\/${pdfPath}.pdf`;\n}\n\nmodule.exports = pdfGenerator;<\/code><\/pre>\n\n\n\n<div class=\"ad-card ad-x\">\n                   <!-- Uber-card -->\n                    <ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-2146900317429219\" data-ad-slot=\"3276046868\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n                    <script>\n                         (adsbygoogle = window.adsbygoogle || []).push({});\n                    <\/script>\n              <\/div>\n\n\n\n<p><strong>In the PdfGenerator.js<\/strong>, You&#8217;ve to lunch the puppeteer browser with a headless flag and go to the desired URL on the new page. finally, you can generate PDF files by using the <code>page.pdf()<\/code> method. <\/p>\n\n\n\n<p>While generating a PDF, always specify the path in the pdf method option otherwise it won&#8217;t be saved to the disk.<\/p>\n\n\n\n<p> you can check the full range of <a href=\"https:\/\/pptr.dev\/#?product=Puppeteer&amp;version=v13.5.1&amp;show=api-pagepdfoptions\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">options<\/a> available for the pdf method of the puppeteer library.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>You can find complete source code of above article on github <a href=\"https:\/\/github.com\/onexabhishek\/html-to-pdf-nodejs\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/github.com\/onexabhishek\/html-to-pdf-nodejs<\/a> .<\/p>\n<\/blockquote>\n\n\n\n<div class=\"ad-card ad-x\">\n                   <!-- Uber LaderBord -->\n                    <ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-2146900317429219\" data-ad-slot=\"9673934251\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n                    <script>\n                         (adsbygoogle = window.adsbygoogle || []).push({});\n                    <\/script>\n              <\/div>\n<div class=\"wp-socializer wpsr-share-icons\" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\"><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\" data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\"><i class=\"fa fa-share-alt\" aria-hidden=\"true\"><\/i><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-count-1 sr-count-1 sr-32px sr-circle sr-opacity sr-pad\"><span class=\"sr-facebook\"><a data-id=\"facebook\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\" title=\"Share this on Facebook\"><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\" data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\"><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a data-id=\"twitter\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\" title=\"Tweet this !\"><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a data-id=\"linkedin\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\" title=\"Add this to LinkedIn\"><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a data-pin-custom=\"true\" data-id=\"pinterest\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\" title=\"Submit this to Pinterest\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\" data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\"><\/span><\/a><\/span>\n<span class=\"sr-print\"><a data-id=\"print\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\" title=\"Print this article \"><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a data-id=\"pdf\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\" title=\"Convert to PDF\"><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span>\n<span class=\"sr-share-menu\"><a href=\"#\" target=\"_blank\" title=\"More share links\" style=\"color:#ffffff;\" data-metadata=\"{&quot;url&quot;:&quot;&quot;,&quot;title&quot;:&quot;&quot;,&quot;excerpt&quot;:&quot;&quot;,&quot;image&quot;:&quot;&quot;,&quot;short-url&quot;:&quot;&quot;,&quot;rss-url&quot;:&quot;https:\\\/\\\/www.ubercompute.com\\\/blog\\\/feed\\\/&quot;,&quot;comments-section&quot;:&quot;comments&quot;,&quot;raw-url&quot;:null,&quot;twitter-username&quot;:&quot;&quot;,&quot;fb-app-id&quot;:&quot;&quot;,&quot;fb-app-secret&quot;:&quot;&quot;}\"><i class=\"fa fa-plus\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Generate multi-page PDF by converting HTML markup to PDF without compromising complex designs by using Puppeteer in Nodejs.<\/p>\n","protected":false},"author":2,"featured_media":1126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[10],"tags":[27,25,28,26],"class_list":["post-1106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn","tag-convert-html-to-pdf-backend","tag-generate-pdf-from-html","tag-html-to-pdf-by-nodejs","tag-print-html-to-pdf-javascript","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Easiest Way to Convert multi-page HTML to PDF Document<\/title>\n<meta name=\"description\" content=\"Generate multi-page PDF by converting HTML markup to PDF without compromising complex designs by using Puppeteer in Nodejs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easiest Way to Convert multi-page HTML to PDF Document\" \/>\n<meta property=\"og:description\" content=\"Generate multi-page PDF by converting HTML markup to PDF without compromising complex designs by using Puppeteer in Nodejs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubercompute\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/ubercompute\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-30T15:38:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-29T04:43:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ubercompute\" \/>\n<meta name=\"twitter:site\" content=\"@ubercompute\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/\"},\"author\":{\"name\":\"Abhishek Singh\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/51e4695c66d42fb1f21cd816d9c685c7\"},\"headline\":\"Easiest Way to Convert multi-page HTML to PDF Document\",\"datePublished\":\"2022-03-30T15:38:19+00:00\",\"dateModified\":\"2022-12-29T04:43:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/\"},\"wordCount\":409,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png\",\"keywords\":[\"convert html to pdf backend\",\"generate pdf from html\",\"Html to pdf by nodejs\",\"print html to pdf javascript\"],\"articleSection\":[\"learn\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/\",\"name\":\"Easiest Way to Convert multi-page HTML to PDF Document\",\"isPartOf\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png\",\"datePublished\":\"2022-03-30T15:38:19+00:00\",\"dateModified\":\"2022-12-29T04:43:34+00:00\",\"description\":\"Generate multi-page PDF by converting HTML markup to PDF without compromising complex designs by using Puppeteer in Nodejs.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png\",\"contentUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ubercompute.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Easiest Way to Convert multi-page HTML to PDF Document\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#website\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/\",\"name\":\"Ubercompute\",\"description\":\"Online code formatter, converters, minifiers and domain tools\",\"publisher\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ubercompute.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#organization\",\"name\":\"Ubercompute\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png\",\"contentUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png\",\"width\":546,\"height\":175,\"caption\":\"Ubercompute\"},\"image\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/ubercompute\",\"https:\/\/x.com\/ubercompute\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/51e4695c66d42fb1f21cd816d9c685c7\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8fe2659167078f1466cf7cfbc644e93969b5128bf11ef2be9f2f2994ba337a6c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8fe2659167078f1466cf7cfbc644e93969b5128bf11ef2be9f2f2994ba337a6c?s=96&d=mm&r=g\",\"caption\":\"Abhishek Singh\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easiest Way to Convert multi-page HTML to PDF Document","description":"Generate multi-page PDF by converting HTML markup to PDF without compromising complex designs by using Puppeteer in Nodejs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/","og_locale":"en_US","og_type":"article","og_title":"Easiest Way to Convert multi-page HTML to PDF Document","og_description":"Generate multi-page PDF by converting HTML markup to PDF without compromising complex designs by using Puppeteer in Nodejs.","og_url":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/","og_site_name":"Ubercompute","article_publisher":"https:\/\/facebook.com\/ubercompute","article_published_time":"2022-03-30T15:38:19+00:00","article_modified_time":"2022-12-29T04:43:34+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png","type":"image\/png"}],"author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_creator":"@ubercompute","twitter_site":"@ubercompute","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#article","isPartOf":{"@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/"},"author":{"name":"Abhishek Singh","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/51e4695c66d42fb1f21cd816d9c685c7"},"headline":"Easiest Way to Convert multi-page HTML to PDF Document","datePublished":"2022-03-30T15:38:19+00:00","dateModified":"2022-12-29T04:43:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/"},"wordCount":409,"commentCount":7,"publisher":{"@id":"https:\/\/www.ubercompute.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png","keywords":["convert html to pdf backend","generate pdf from html","Html to pdf by nodejs","print html to pdf javascript"],"articleSection":["learn"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/","url":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/","name":"Easiest Way to Convert multi-page HTML to PDF Document","isPartOf":{"@id":"https:\/\/www.ubercompute.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage"},"image":{"@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png","datePublished":"2022-03-30T15:38:19+00:00","dateModified":"2022-12-29T04:43:34+00:00","description":"Generate multi-page PDF by converting HTML markup to PDF without compromising complex designs by using Puppeteer in Nodejs.","breadcrumb":{"@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#primaryimage","url":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png","contentUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/03\/HTML-to-PDF.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.ubercompute.com\/blog\/convert-multi-page-html-to-pdf-document\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ubercompute.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Easiest Way to Convert multi-page HTML to PDF Document"}]},{"@type":"WebSite","@id":"https:\/\/www.ubercompute.com\/blog\/#website","url":"https:\/\/www.ubercompute.com\/blog\/","name":"Ubercompute","description":"Online code formatter, converters, minifiers and domain tools","publisher":{"@id":"https:\/\/www.ubercompute.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ubercompute.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.ubercompute.com\/blog\/#organization","name":"Ubercompute","url":"https:\/\/www.ubercompute.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png","contentUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png","width":546,"height":175,"caption":"Ubercompute"},"image":{"@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/ubercompute","https:\/\/x.com\/ubercompute"]},{"@type":"Person","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/51e4695c66d42fb1f21cd816d9c685c7","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8fe2659167078f1466cf7cfbc644e93969b5128bf11ef2be9f2f2994ba337a6c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8fe2659167078f1466cf7cfbc644e93969b5128bf11ef2be9f2f2994ba337a6c?s=96&d=mm&r=g","caption":"Abhishek Singh"}}]}},"_links":{"self":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts\/1106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/comments?post=1106"}],"version-history":[{"count":36,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts\/1106\/revisions"}],"predecessor-version":[{"id":1288,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts\/1106\/revisions\/1288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/media\/1126"}],"wp:attachment":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/media?parent=1106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/categories?post=1106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/tags?post=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}