{"id":3631,"date":"2018-06-05T13:31:23","date_gmt":"2018-06-05T08:01:23","guid":{"rendered":"https:\/\/www.csestack.org\/?p=3631"},"modified":"2022-05-11T12:51:27","modified_gmt":"2022-05-11T07:21:27","slug":"code-print-save-html-pdf","status":"publish","type":"post","link":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/","title":{"rendered":"Code to Print and Save HTML Page as PDF using JavaScript"},"content":{"rendered":"\n<p>Being a web developer, many times you need to allow the user to print or save HTML page as PDF.<\/p>\n\n\n\n<p>Suppose you have a web form on your website and the user has to submit the data. After submitting the form, you can allow the user to print or save the HTML page as a PDF with all the user data. A user can use this data for future reference.<\/p>\n\n\n\n<p>Another example. If you have a tutorial on your website, you can allow a&nbsp;user to print the tutorial so that the user can use it offline.<\/p>\n\n\n\n<p>A simple solution&nbsp;to allow&nbsp;the user to print or save the HTML page as PDF will be very helpful. You&nbsp;don&#8217;t need any external tool to convert HTML to PDF.<\/p>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Code to Print and Save HTML Page as PDF<\/h3>\n\n\n\n<p>Hope you are familiar with <a href=\"https:\/\/www.csestack.org\/basic-html-tags-example\/\">basic HTML tags<\/a>. Call the Javascript function\u00a0inside the HTML to print and save the webpage as PDF.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block norun\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:false,&quot;className&quot;:&quot;norun&quot;,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Tutorial to print HTML page&lt;\/h2&gt;\n    &lt;p&gt;Click the button to print this page.&lt;\/p&gt;\n\n    &lt;button onclick=&quot;printFunction()&quot;&gt;Print&lt;\/button&gt;\n\n    &lt;script&gt;\n      function printFunction() { \n        window.print(); \n      }\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p><strong>Here,<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The <code>window.print()<\/code> is the inbuilt function to print the current window.<\/li><li>The\u00a0 <code>printFunction()<\/code> is user define javascript function which you call from HTML object.<\/li><\/ul>\n\n\n\n<p>By clicking on the button, the user can save the HTML page as PDF or can download it.<\/p>\n\n\n\n<p>The <code>print()<\/code> function supports almost all the popular web browsers like Google Chrome, Firefox, Internet Explorer, Opera, and Safari (Mac and other iOS web browsers).<\/p>\n\n\n\n<h4 class=\"has-text-align-center wp-block-heading\">What&#8217;s Next?<\/h4>\n\n\n\n<p>If you are a web developer or interested in web development,\u00a0 do check how the <a href=\"https:\/\/www.csestack.org\/practices-build-best-web-form-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">20 best web form design practices<\/a>\u00a0have helped me grow professionally.<\/p>\n\n\n\n<p>Javascript is one of the <a href=\"https:\/\/www.csestack.org\/high-paying-programming-language-job\/\">highest-paying programming languages<\/a> and has very advanced programming features.<\/p>\n\n\n\n<p>This is a simple JavaScript function to convert HTML to PDF or to print or save HTML page as PDF. You can run this code in an <a href=\"https:\/\/www.csestack.org\/code-editor\/html-editor.html\" target=\"_blank\" rel=\"noreferrer noopener\">online&nbsp;HTML editor<\/a> for testing.<\/p>\n\n\n\n<p>For more of such content, stay tuned.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to add Javascript code to your web page to print and to save HTML page as PDF? Without any external HTML to PDF online tool&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,233],"tags":[180,210],"class_list":["post-3631","post","type-post","status-publish","format-standard","hentry","category-code","category-html-css","tag-html","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Code to Print and Save HTML Page as PDF using JavaScript<\/title>\n<meta name=\"description\" content=\"How to add Javascript code to your web page to print and to save HTML page as PDF? Without any external HTML to PDF online tool...\" \/>\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.csestack.org\/code-print-save-html-pdf\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code to Print and Save HTML Page as PDF using JavaScript\" \/>\n<meta property=\"og:description\" content=\"How to add Javascript code to your web page to print and to save HTML page as PDF? Without any external HTML to PDF online tool...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.csestack.org\/code-print-save-html-pdf\/\" \/>\n<meta property=\"og:site_name\" content=\"CSEstack\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/aniruddha.ca\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/aniruddha.ca\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-05T08:01:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-11T07:21:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.csestack.org\/wp-content\/uploads\/2024\/01\/csestack-blog.jpg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Aniruddha Chaudhari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ani_chaudhari\" \/>\n<meta name=\"twitter:site\" content=\"@ani_chaudhari\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aniruddha Chaudhari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/\"},\"author\":{\"name\":\"Aniruddha Chaudhari\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\"},\"headline\":\"Code to Print and Save HTML Page as PDF using JavaScript\",\"datePublished\":\"2018-06-05T08:01:23+00:00\",\"dateModified\":\"2022-05-11T07:21:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/\"},\"wordCount\":323,\"commentCount\":21,\"publisher\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\"},\"keywords\":[\"HTML\",\"JavaScript\"],\"articleSection\":[\"Code\",\"HTML &amp; CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/\",\"url\":\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/\",\"name\":\"Code to Print and Save HTML Page as PDF using JavaScript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#website\"},\"datePublished\":\"2018-06-05T08:01:23+00:00\",\"dateModified\":\"2022-05-11T07:21:27+00:00\",\"description\":\"How to add Javascript code to your web page to print and to save HTML page as PDF? Without any external HTML to PDF online tool...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/code-print-save-html-pdf\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.csestack.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code to Print and Save HTML Page as PDF using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#website\",\"url\":\"https:\\\/\\\/www.csestack.org\\\/\",\"name\":\"CSEstack\",\"description\":\"Computer Science &amp; Programming Portal\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.csestack.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\",\"name\":\"Aniruddha Chaudhari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\",\"url\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\",\"contentUrl\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\",\"width\":634,\"height\":634,\"caption\":\"Aniruddha Chaudhari\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\"},\"description\":\"I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.\",\"sameAs\":[\"https:\\\/\\\/www.csestack.org\",\"https:\\\/\\\/www.facebook.com\\\/aniruddha.ca\",\"pythonwithani\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/aniruddha28\\\/\",\"https:\\\/\\\/x.com\\\/ani_chaudhari\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCw0a__B0eJsvCujkSIfLTAA\"],\"url\":\"https:\\\/\\\/www.csestack.org\\\/author\\\/anicse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Code to Print and Save HTML Page as PDF using JavaScript","description":"How to add Javascript code to your web page to print and to save HTML page as PDF? Without any external HTML to PDF online tool...","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.csestack.org\/code-print-save-html-pdf\/","og_locale":"en_US","og_type":"article","og_title":"Code to Print and Save HTML Page as PDF using JavaScript","og_description":"How to add Javascript code to your web page to print and to save HTML page as PDF? Without any external HTML to PDF online tool...","og_url":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/","og_site_name":"CSEstack","article_publisher":"https:\/\/www.facebook.com\/aniruddha.ca","article_author":"https:\/\/www.facebook.com\/aniruddha.ca","article_published_time":"2018-06-05T08:01:23+00:00","article_modified_time":"2022-05-11T07:21:27+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.csestack.org\/wp-content\/uploads\/2024\/01\/csestack-blog.jpg","type":"image\/jpeg"}],"author":"Aniruddha Chaudhari","twitter_card":"summary_large_image","twitter_creator":"@ani_chaudhari","twitter_site":"@ani_chaudhari","twitter_misc":{"Written by":"Aniruddha Chaudhari","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/#article","isPartOf":{"@id":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/"},"author":{"name":"Aniruddha Chaudhari","@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218"},"headline":"Code to Print and Save HTML Page as PDF using JavaScript","datePublished":"2018-06-05T08:01:23+00:00","dateModified":"2022-05-11T07:21:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/"},"wordCount":323,"commentCount":21,"publisher":{"@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218"},"keywords":["HTML","JavaScript"],"articleSection":["Code","HTML &amp; CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.csestack.org\/code-print-save-html-pdf\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/","url":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/","name":"Code to Print and Save HTML Page as PDF using JavaScript","isPartOf":{"@id":"https:\/\/www.csestack.org\/#website"},"datePublished":"2018-06-05T08:01:23+00:00","dateModified":"2022-05-11T07:21:27+00:00","description":"How to add Javascript code to your web page to print and to save HTML page as PDF? Without any external HTML to PDF online tool...","breadcrumb":{"@id":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.csestack.org\/code-print-save-html-pdf\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.csestack.org\/code-print-save-html-pdf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.csestack.org\/"},{"@type":"ListItem","position":2,"name":"Code to Print and Save HTML Page as PDF using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.csestack.org\/#website","url":"https:\/\/www.csestack.org\/","name":"CSEstack","description":"Computer Science &amp; Programming Portal","publisher":{"@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.csestack.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218","name":"Aniruddha Chaudhari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg","url":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg","contentUrl":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg","width":634,"height":634,"caption":"Aniruddha Chaudhari"},"logo":{"@id":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg"},"description":"I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.","sameAs":["https:\/\/www.csestack.org","https:\/\/www.facebook.com\/aniruddha.ca","pythonwithani","https:\/\/www.linkedin.com\/in\/aniruddha28\/","https:\/\/x.com\/ani_chaudhari","https:\/\/www.youtube.com\/channel\/UCw0a__B0eJsvCujkSIfLTAA"],"url":"https:\/\/www.csestack.org\/author\/anicse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts\/3631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/comments?post=3631"}],"version-history":[{"count":11,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts\/3631\/revisions"}],"predecessor-version":[{"id":9856,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts\/3631\/revisions\/9856"}],"wp:attachment":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/media?parent=3631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/categories?post=3631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/tags?post=3631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}