jsPDF Html2Canvas Tutorial to Add Images & Text inside PDF Document in Javascript For Beginners

Welcome folks today in this blog post we will be adding text and images in pdf document using jspdf and html2canvas library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code. First of all we will be including the jspdf and html2canvas cdn of library as shown below

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>Document</title>
</head>
<body>
    
</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.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://fbktnsetnet.000webhostapp.com/wp-content/uploads/2018/04/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

As you can see we are including the cdn of html2canvas and jspdf. And also we have the jquery cdn as well. And then we will be including the same html in which we will have one heading and also we are embeding external image from url. And then we have the button to export the html including image and heading to pdf document.

<div id="someHtml">
        <h1>This is some html</h1>
        <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGFwdG9wfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
    <button onclick="generatePDF()">Generate PDF</button>

</div>

<button onclick="generatePDF()">Generate PDF</button>

And then we have the div element inside that we have the h1 heading and also we have the img element. Inside that img element we are rendering the image from the unsplash url. As you can see we have attached the onclick event listener on the generate pdf button. And inside this function we will be generating the pdf document using html2canvas and jspdf library.

function generatePDF(){
    var div = document.querySelector('#someHtml')
    var imgData
    html2canvas(div,{
        useCORS:true,
        onrendered:function(canvas){
            imgData = canvas.toDataURL('image/png')

            var doc = new jsPDF('p','pt','a4')

            doc.addImage(imgData,'PNG',10,10)

            doc.save("output.pdf")

            window.open(imgData)
        }
    })
   }

function generatePDF(){

var div = document.querySelector('#someHtml')

var imgData

html2canvas(div,{

useCORS:true,

onrendered:function(canvas){

imgData = canvas.toDataURL('image/png')

var doc = new jsPDF('p','pt','a4')

doc.addImage(imgData,'PNG',10,10)

doc.save("output.pdf")

window.open(imgData)

}

})

}

As you can see in the above function we are initializing the html2canvas method inside that we are first of all passing the reference of the DOM Element which is the actual div element. We are targeting them using the id parameter. And then in the second argument we are passing the config object in which we are setting the CORS parameter to true and then we have the onRendered event in which we have the canvas object inside the callback function. Inside this function we will be getting the base64 code of the canvas using the toDataURL() method here we are passing the PNG image and after that we are declaring new constructor of jsPDF and after that we are adding the base64 code image to the pdf document using the imgData base64 code. And then we are saving the pdf document with the filename called output.pdf and then we are opening the base64 code pdf document in the browser using the open() method inside that method we are passing the base64 image data.

So if you open the web app inside the browser you will see the below output as shown below

Get Started

Leave a Reply Cancel reply