{"id":2898,"date":"2022-08-15T13:36:00","date_gmt":"2022-08-15T08:36:00","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2898"},"modified":"2022-08-15T13:38:06","modified_gmt":"2022-08-15T08:38:06","slug":"html2pdf-js-add-page-break-in-pdf-file-using-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/","title":{"rendered":"html2pdf.js Add Page Break in PDF File Using JavaScript"},"content":{"rendered":"\n

In this tutorial, you will learn how to add page break<\/strong> in a PDF file using JavaScript<\/strong> and html2pdf.js<\/strong>. The complete source code of this project is given below.<\/p>\n\n\n\n

To get started, add the CDN of html2pdf.js<\/code> library inside your HTML document.<\/p>\n\n\n\n

<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.8.0\/html2pdf.bundle.min.js"><\/script><\/pre><\/div>\n\n\n\n
Basically, html2pdf.js<\/code>\u00a0library has a special class html2pdf__pagebreak<\/code> that we can use in our HTML code to insert a\u00a0page break\u00a0inside PDF document. For example, we can create an empty <div><\/code> element and add this class as mentioned below.<\/p>\n\n\n\n
<div class="html2pdf__page-break"><\/div><\/pre><\/div>\n\n\n\n
\n\n\n\n
Complete html2pdf Page Break Example Code<\/h2>\n\n\n\n
Now, let’s have a look at the complete example of html2pdf page break<\/strong>.<\/p>\n\n\n\n
index.html<\/h3>\n\n\n\n
<link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css">\n\n<div id="element-to-print">\n    <span>I'm on page 1!<\/span>\n    <div class="html2pdf__page-break"><\/div>\n    <span>I'm on page 2!<\/span>\n  <\/div>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.8.0\/html2pdf.bundle.min.js"><\/script>\n<script>\n\n var element = document.getElementById('element-to-print');\n html2pdf(element, {\n  margin:       10,\n  filename:     'myfile.pdf',\n  image:        { type: 'jpeg', quality: 0.98 },\n  html2canvas:  { scale: 2, logging: true, dpi: 192, letterRendering: true },\n  jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }\n});\n<\/script><\/pre><\/div>\n\n\n\n
It’s time to open the\u00a0index.html<\/code>\u00a0file inside the web browser. So, go ahead and open it.<\/p>\n\n\n\n
When you open the index.html<\/code> file in browser, you will notice that a PDF file will be generated. Now, open that PDF file, you will see that it has two pages. The first page contains the content of first <span><\/code> element whereas the second page will contain the content of second <span><\/code> element.<\/p>\n\n\n\n
\n\n\n\n
html2pdf Page Break Example Screenshots<\/h2>\n\n\n\n
\"html2pdf<\/figure>\n\n\n\n
\"html2pdf<\/figure>\n\n\n\n
\"html2pdf<\/figure>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn how to add page break in a PDF file using JavaScript and html2pdf.js. The complete source code of this project is given below. To get started, add the CDN of html2pdf.js library inside your HTML document. Basically, html2pdf.js\u00a0library has a special class html2pdf__pagebreak that we can use in our … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2908,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-2898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nhtml2pdf.js Add Page Break in PDF File Using JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to add page break in a PDF file using JavaScript and html2pdf.js. The complete source code of this project is given\" \/>\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.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"html2pdf.js Add Page Break in PDF File Using JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to add page break in a PDF file using JavaScript and html2pdf.js. The complete source code of this project is given\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-15T08:36:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-15T08:38:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/html2pdf_page_break.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"html2pdf.js Add Page Break in PDF File Using JavaScript","description":"In this tutorial, you will learn how to add page break in a PDF file using JavaScript and html2pdf.js. The complete source code of this project is given","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.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"html2pdf.js Add Page Break in PDF File Using JavaScript","og_description":"In this tutorial, you will learn how to add page break in a PDF file using JavaScript and html2pdf.js. The complete source code of this project is given","og_url":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-08-15T08:36:00+00:00","article_modified_time":"2022-08-15T08:38:06+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/html2pdf_page_break.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"html2pdf.js Add Page Break in PDF File Using JavaScript","datePublished":"2022-08-15T08:36:00+00:00","dateModified":"2022-08-15T08:38:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/"},"wordCount":186,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/html2pdf_page_break.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/","name":"html2pdf.js Add Page Break in PDF File Using JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/html2pdf_page_break.jpg","datePublished":"2022-08-15T08:36:00+00:00","dateModified":"2022-08-15T08:38:06+00:00","description":"In this tutorial, you will learn how to add page break in a PDF file using JavaScript and html2pdf.js. The complete source code of this project is given","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/html2pdf_page_break.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/html2pdf_page_break.jpg","width":880,"height":495,"caption":"html2pdf Page Break"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/html2pdf-js-add-page-break-in-pdf-file-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"html2pdf.js Add Page Break in PDF File Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=2898"}],"version-history":[{"count":0,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/2908"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=2898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}