HTML2PDF.js Tutorial to Convert HTML to PDF Document With Page Break in Browser Using Javascript

Welcome folks today in this blog post we will be exporting the html document to pdf document with page break in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a index.html file and copy paste the following code

First of all we will be including the cdn of html2pdf library as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html2pdf.js page break</title>
</head>
<body>
    
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>html2pdf.js page break</title>

</head>

<body>

</body>

</html>

And as you can see in the above code we are including the cdn of html2pdf.js library as shown above. And now we need to write some html that we need to export to pdf document as shown below

<div id="element">
        <div>First Content</div>
        <div class="html2pdf__page-break"></div>
        <div>second content</div>
    </div>

<div>First Content</div>

<div>second content</div>

</div>

As you can see we have the div parent element and we have given id to it so that we can target it using the javascript. And then we have a div with some content and then we have a page break class which is html2pdf.js page break class which is called html2pdf__page-break you need to write the same class because this class will make sure it will add the page break after this the content will be shifted to the second page in the pdf document. And after this we are defining one other div element with some content. And now we simply need to export to pdf document by adding some javascript code as shown below

Now first of all we will be targeting the parent div element which has got the id attached to it as shown below

 let element = document.getElementById('element')

1	let element = document.getElementById('element')

Now we simply need to call the html2pdf() method and pass this element to it as shown below

 let element = document.getElementById('element')

1	let element = document.getElementById('element')

Now if you open the application the pdf file will be downloaded automatically as an attachment as you can see

As you can see the content is split up into 2 pages with page break but there is some problem out there. We need to add some margin and padding to the text. So we can provide some config options to the html2pdf() constructor as shown below

 html2pdf(element,{
    margin:10,
    filename:'output.pdf',
    image:{type:'jpeg',quality:0.98},
    html2canvas:{scale:2,logging:true,dpi:192,letterRendering:true},
    jsPDF:{unit:'mm',format:'a4',orientation:'portrait'}
 })

html2pdf(element,{

margin:10,

filename:'output.pdf',

image:{type:'jpeg',quality:0.98},

html2canvas:{scale:2,logging:true,dpi:192,letterRendering:true},

jsPDF:{unit:'mm',format:'a4',orientation:'portrait'}

})

As you can see we are providing some custom options such as the margin which is in numbers and then we are also passing the custom filename to the pdf document and also adding the image quality and type parameter. Now if you open the app the text will have some space and margin in pdf document

Full Source Code

Wrapping it up this is the full source code of index.html file with javascript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jspdf encode pdf to base64 code</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div id="element">
        <div>First Content</div>
        <div class="html2pdf__page-break"></div>
        <div>second content</div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.js"></script>
<script>
 let element = document.getElementById('element')
 html2pdf(element,{
    margin:10,
    filename:'output.pdf',
    image:{type:'jpeg',quality:0.98},
    html2canvas:{scale:2,logging:true,dpi:192,letterRendering:true},
    jsPDF:{unit:'mm',format:'a4',orientation:'portrait'}
 })
</script>
</html>