Welcome folks today in this blog post we will be adding the pdf document in pdf document using base64 code using javascript in browser. 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 inside the root directory and copy paste the below code
First of all we will be including the jspdf cdn
library in the index.html file as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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 Add Image Using Base64 in PDF Document</title> </head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> </html> |
As you can see we are including the script
tag which contains the jspdf cdn in the above code.
Adding the File Input in HTML
Now we will be adding the file input tag where we will be taking the user input and we will allow the user to upload the image files inside the browser and copy paste the below code
1 2 |
<input type="file"> <button>Create PDF</button> |
As you can see we have added the input file tag and we have the button of create PDF to export the uploaded image to pdf document.
As you can see we have the input file and then we have the button. Now we need to define the event handlers to these input elements
Adding the Event Listeners
1 2 |
<input type="file" onchange="encodeImage(this)"> <button onclick="createPDF()">Create PDF</button> |
Now we will be adding the event listeners to all the input elements. First of all we will be attaching the onchange
event handler whenever the input image is uploaded and this function will automatically be executed which is the encodeImage()
here we are passing the actual image which is uploaded as an argument. This onchange
event will automatically get called when the value of the file will change.
And also we are attaching the onclick
event listener whenever the button is clicked to generate pdf using the createPDF()
method that we will define later on.
Converting the Uploaded Image to Base64 Code
Now guys inside the encodedImage()
method we will be converting the uploaded image by the user to base64 code using the fileReader class as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var imgData = "" function encodeImage(image) { var img = image.files[0] var file = new FileReader() file.onloadend = function () { console.log(file.result) imgData = file.result } file.readAsDataURL(img) } |
As you can see we are declaring the variable imgData where we will be storing the base64 code of the image. For this we are using the fileReader class to create a new object of it. Through the fileReader object we are using the event called as onloadend
to get the base64 code of selected image file. And then we are getting base64 code using result
property. And also we are using the readAsDataURL()
method to convert the image to Data URL or base64 code.
Now if you select the image file using the input element in the browser you will see the below result which is the base64 code in the console of the browser as shown below
As you can see we have the big random string which is the base64 code of the image. So we have successfully exported the big image file to a random string which is called as base64 code. Now we need to use this base64 code to export the image to the pdf document.
Exporting the Base64 Code to PDF Document
Now with the help of jsPDF Library we will be exporting the base64 code of the image uploaded by the user to the pdf document. For this we are first of all initializing the new object of jsPDF. And after that we are using the addImage()
method of jspdf to add the base64 code of the image and then we are providing the x and y coordinates and after that we are saving the pdf document using the save()
method and there we are providing the custom file name as shown below
1 2 3 4 5 |
function createPDF(){ var doc = new jsPDF() doc.addImage(imgData,10,10) doc.save("output.pdf") } |
Full Source Code
Wrapping it up just see the entire source code of index.html
file as shown below
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!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> <input type="file" onchange="encodeImage(this)"> <button onclick="createPDF()">Create PDF</button> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> <script> var imgData = "" function encodeImage(image) { var img = image.files[0] var file = new FileReader() file.onloadend = function () { console.log(file.result) imgData = file.result } file.readAsDataURL(img) } function createPDF(){ var doc = new jsPDF() doc.addImage(imgData,10,10) doc.save("output.pdf") } </script> </html> |