Your Cart

Get Amazing Offers on Scripts

Get UX Support

How to Convert HTML div into Multipage PDF using jsPDF

jsPDF is a nice library to convert HTML content into PDF. We can put the different type of elements in PDF from HTML like an icon, images, text, CSS styles.
Here we will discuss an example of jsPDF to convert long HTML page into PDF document which will be generated client-side and download.

				
					<!DOCTYPE html>
<html>
  <head>
    
    
    
    
    <title>Page Title</title>
  </head>
  <body>
    <button onclick="getPDF()">Print</button>
    <div class="canvas_div_pdf">
      <!--Add HTML content you want to convert to PDF-->
      <h1 style="color: red; ">This is a Heading</h1>
      <p>This is a paragraph.</p>
    </div>
  <script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.tutorialslides.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.1.1"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode,e=(p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0),i.toDataURL());return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(p&&p.fillText)switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([129777,127995,8205,129778,127999],[129777,127995,8203,129778,127999])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings);
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.1' id='jquery-core-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script><script type='text/javascript' src='https://www.googletagmanager.com/gtag/js?id=UA-101653197-1' id='google_gtagjs-js' async></script><script type='text/javascript' id='google_gtagjs-js-after'>
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}
gtag('set', 'linker', {"domains":["www.tutorialslides.com"]} );
gtag("js", new Date());
gtag("set", "developer_id.dZTNiMT", true);
gtag("config", "UA-101653197-1", {"anonymize_ip":true});
</script><script type="text/javascript"> var commercekit_ajs = {"ajax_url":"\/?commercekit-ajax"}; var commercekit_pdp = []; var commercekit_as = []; </script><script>
			document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );
		</script><script>
				document.documentElement.classList.add(
					'jetpack-lazy-images-js-enabled'
				);
			</script><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7415493819694742&amp;host=ca-host-pub-2644536267352236" crossorigin="anonymous" type="text/javascript"></script><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script><script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script><script>
      function getPDF() {
        var HTML_Width = $(".canvas_div_pdf").width();
        var HTML_Height = $(".canvas_div_pdf").height();
        var top_left_margin = 15;
        var PDF_Width = HTML_Width + (top_left_margin * 2);
        var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height;
        var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
        html2canvas($(".canvas_div_pdf")[0], {
          allowTaint: true
        }).then(function(canvas) {
          canvas.getContext('2d');
          console.log(canvas.height + "  " + canvas.width);
          var imgData = canvas.toDataURL("image/jpeg", 1.0);
          var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
          pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
          for (var i = 1; i <= totalPDFPages; i++) {
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
          }
          pdf.save("HTML-Document.pdf");
        });
      };
    </script><script type="application/ld+json">{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.tutorialslides.com"}},{"@type":"ListItem","position":2,"item":{"name":"HTML","@id":"https:\/\/www.tutorialslides.com\/category\/html\/"}},{"@type":"ListItem","position":3,"item":{"name":"How to Convert HTML div into Multipage PDF using jsPDF","@id":"https:\/\/www.tutorialslides.com\/how-to-convert-html-div-into-multipage-pdf-using-jspdf\/"}}]}</script><script>window.addEventListener( 'load', function() {
				document.querySelectorAll( 'link' ).forEach( function( e ) {'not all' === e.media && e.dataset.media && ( e.media = e.dataset.media, delete e.dataset.media );} );
				var e = document.getElementById( 'jetpack-boost-critical-css' );
				e && ( e.media = 'not all' );
			} );</script><script type="text/javascript">
		(function () {
			var c = document.body.className;
			c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
			document.body.className = c;
		})();
	</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.7.0-wc.7.3.0' id='jquery-blockui-js'></script><script type='text/javascript' id='wc-add-to-cart-js-extra'>
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%&elementor_page_id=26336","i18n_view_cart":"View cart","cart_url":"https:\/\/www.tutorialslides.com\/cart\/","is_cart":"","cart_redirect_after_add":"no"};
/* ]]> */
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=7.3.0' id='wc-add-to-cart-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.7.3.0' id='js-cookie-js'></script><script type='text/javascript' id='woocommerce-js-extra'>
/* <![CDATA[ */
var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%&elementor_page_id=26336"};
/* ]]> */
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=7.3.0' id='woocommerce-js'></script><script type='text/javascript' id='wc-cart-fragments-js-extra'>
/* <![CDATA[ */
var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%&elementor_page_id=26336","cart_hash_key":"wc_cart_hash_a7623a0ad8cba47876dcbb4544ad401a","fragment_name":"wc_fragments_a7623a0ad8cba47876dcbb4544ad401a","request_timeout":"5000"};
/* ]]> */
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=7.3.0' id='wc-cart-fragments-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/themes/shoptimizer/assets/js/main.min.js?ver=2.6.3' id='shoptimizer-main-js'></script><script type='text/javascript' id='shoptimizer-main-js-after'>
				jQuery( document ).ready( function( $ ) {
					$( 'body' ).on( 'added_to_cart', function( event, fragments, cart_hash ) {
						if ( ! $( 'body' ).hasClass( 'elementor-editor-active' ) ) {
							$( 'body' ).addClass( 'drawer-open' );
						}
					} );				
				} );
				document.addEventListener( 'DOMContentLoaded', function() {
					document.addEventListener( 'click', function( event ) {
						var is_inner = event.target.closest( '.shoptimizer-mini-cart-wrap' );
						if ( ! event.target.classList.contains( 'shoptimizer-mini-cart-wrap' ) && ! is_inner ) {
							document.querySelector( 'body' ).classList.remove( 'drawer-open' );
						}
						var is_inner2 = event.target.closest( '.cart-click' );
						if ( event.target.classList.contains( 'cart-click' ) || is_inner2 ) {
							var is_header = event.target.closest( '.site-header-cart' );
							if ( is_header ) {
								event.preventDefault();
								document.querySelector( 'body' ).classList.toggle( 'drawer-open' );
							}
						}
						if ( event.target.classList.contains( 'close-drawer' ) ) {
							document.querySelector( 'body' ).classList.remove( 'drawer-open' );
						}
					} );
				} );
				var interceptor = ( function( open ) {
					XMLHttpRequest.prototype.open = function( method, url, async, user, pass ) {
						this.addEventListener( 'readystatechange', function() {
						switch ( this.readyState ) {
							case 1:
								document.querySelector( '#ajax-loading' ).style.display = 'block';
							break;
							case 4:
								document.querySelector( '#ajax-loading' ).style.display = 'none';
							break;
						}
						}, false );
						if ( async !== false ) {
							async = true;
						}
						open.call( this, method, url, async, user, pass );
					};
				}  ( XMLHttpRequest.prototype.open ) );
				document.addEventListener( 'DOMContentLoaded', function() {
					document.querySelector( '#ajax-loading' ).style.display = 'none';
				} );
				
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/comment-reply.min.js?ver=6.1.1' id='comment-reply-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/jetpack-boost/jetpack_vendor/automattic/jetpack-lazy-images/dist/intersection-observer.js?minify=false&#038;ver=83ec8aa758f883d6da14' id='jetpack-lazy-images-polyfill-intersectionobserver-js'></script><script type='text/javascript' id='jetpack-lazy-images-js-extra'>
/* <![CDATA[ */
var jetpackLazyImagesL10n = {"loading_warning":"Images are still loading. Please cancel your print and try again."};
/* ]]> */
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/jetpack-boost/jetpack_vendor/automattic/jetpack-lazy-images/dist/lazy-images.js?minify=false&#038;ver=8767d0da914b289bd862' id='jetpack-lazy-images-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/wp-smushit/app/assets/js/smush-lazy-load.min.js?ver=3.12.4' id='smush-lazy-load-js'></script><script type='text/javascript' id='ivory-search-scripts-js-extra'>
/* <![CDATA[ */
var IvorySearchVars = {"is_analytics_enabled":"1"};
/* ]]> */
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/add-search-to-menu/public/js/ivory-search.min.js?ver=5.5' id='ivory-search-scripts-js'></script><script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js?ver=1.23.0' id='prismjs_core-js'></script><script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js?ver=1.23.0' id='prismjs_loader-js'></script><script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js?ver=1.23.0' id='prismjs_normalize-js'></script><script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.js?ver=1.23.0' id='prismjs_line_numbers-js'></script><script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js?ver=1.23.0' id='prismjs_toolbar-js'></script><script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.23.0' id='prismjs_copy_to_clipboard-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.8.2' id='elementor-pro-webpack-runtime-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.10.1' id='elementor-webpack-runtime-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.10.1' id='elementor-frontend-modules-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.9' id='regenerator-runtime-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/dist/hooks.min.js?ver=4169d3cf8e8d95a3d6d5' id='wp-hooks-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/dist/i18n.min.js?ver=9e794f35a71bb98672ae' id='wp-i18n-js'></script><script type='text/javascript' id='wp-i18n-js-after'>
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script><script type='text/javascript' id='elementor-pro-frontend-js-before'>
var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/www.tutorialslides.com\/wp-admin\/admin-ajax.php","nonce":"10334d33a8","urls":{"assets":"https:\/\/www.tutorialslides.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.tutorialslides.com\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"}},"woocommerce":{"menu_cart":{"cart_page_url":"https:\/\/www.tutorialslides.com\/cart\/","checkout_page_url":"https:\/\/www.tutorialslides.com\/checkout\/","fragments_nonce":"5cc29c9a2e"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/www.tutorialslides.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.8.2' id='elementor-pro-frontend-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2' id='elementor-waypoints-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script><script type='text/javascript' id='elementor-frontend-js-before'>
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Extra","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Extra","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.10.1","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"a11y_improvements":true,"additional_custom_breakpoints":true,"e_hidden_wordpress_widgets":true,"theme_builder_v2":true,"landing-pages":true,"kit-elements-defaults":true,"page-transitions":true,"notes":true,"form-submissions":true,"e_scroll_snap":true},"urls":{"assets":"https:\/\/www.tutorialslides.com\/wp-content\/plugins\/elementor\/assets\/"},"settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","woocommerce_notices_elements":[]},"post":{"id":26336,"title":"How%20to%20Convert%20HTML%20div%20into%20Multipage%20PDF%20using%20jsPDF%20%E2%80%93%20Tutorialslides","excerpt":"","featuredImage":false}};
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.10.1' id='elementor-frontend-js'></script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.8.2' id='pro-elements-handlers-js'></script><script type='text/javascript' id='anwp-pg-scripts-js-extra'>
/* <![CDATA[ */
var anwpPostGridElementorData = {"ajax_url":"https:\/\/www.tutorialslides.com\/wp-admin\/admin-ajax.php","public_nonce":"67f7e738aa","premium_active":"","loader":"https:\/\/www.tutorialslides.com\/wp-includes\/js\/tinymce\/skins\/lightgray\/img\/loader.gif"};
/* ]]> */
</script><script type='text/javascript' src='https://www.tutorialslides.com/wp-content/plugins/anwp-post-grid-for-elementor/public/js/plugin.min.js?ver=1.0.0' id='anwp-pg-scripts-js'></script></body>
</html>
				
			
Leave a Reply

Your email address will not be published. Required fields are marked *

Free Worldwide shipping

On all orders above $50

Easy 30 days returns

30 days money back guarantee

International Warranty

Offered in the country of usage

100% Secure Checkout

PayPal / MasterCard / Visa