Welcome folks today in this blog post we will be encoding the input pdf file to base64 code
and embed it using iframe tag in browser using javascript. All the full source code of the example 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 cdn of jquery
library and also we are including the jspdf
cdn 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 encode pdf to base64 code</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.3.5/jspdf.min.js"></script> </html> |
Now we need to simple display a button and on that button we need to bind a onclick
event listener so when we click that button we will executing the function to encode the pdf document to base64 code.
1 |
<button onclick="encode()">Encode PDF Document</button> |
As you can see we are having the button whose label is encode pdf document
and we have attached the onclick attribute when we click it this function called encode()
will be executed
Encoding PDF to Base64 Code
1 2 3 4 |
function encode(){ let doc = new jsPDF() doc.addPage() } |
As you can see inside the above function we are first of all initializing the new instance of the jsPDF()
constructor. And we have the doc
object and after that we are adding a empty
page inside the pdf document using the addPage()
method. Now after that we need to add some text inside the second page.
1 2 |
doc.text("hello world this is second page",10,10) doc.text("this is some more text",20,20) |
As you can see we are using the text()
method to insert the text inside the pdf document and we are also positioning the text using the x
and y
coordinates.
And now guys we will be using the output()
method available inside the jspdf
library to encode the pdf document to base64 code as shown below
1 |
let output = doc.output() |
And after that we need to construct the full base64 code
url that we can display inside the browser as shown below
1 |
let url = "data:application/pdf;base64," + btoa(output) |
As you can see we have first of all appending some text before the random base64 code
of pdf document. This text contains the extension and mimetype of the document which in this case is pdf
. Now we need to display this base64 code inside the iframe
tag as shown below
1 2 3 4 5 6 7 |
let iframe = `<iframe width="100%" height="100%" src="${url}"></iframe>` let x = window.open() x.document.open() x.document.write(iframe) x.document.close() document.location.href = url |
As you can see we are using the base64 code inside the iframe tag and also we are providing the width and height of the iframe window. And then we are opening this iframe in the browser using the open()
method and then we are writing or appending this iframe in browser using the write()
method. And lastly we are redirecting the user to this iframe in the browser by manipulating the location and the href property of the document object. Now if you open the app inside the browser and if you click the button you will see the below pdf in the browser in the iframe
Full Source Code
Wrapping this blog post just see the full source code of index.html
along with the javascript code as well
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 |
<!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> </head> <body> <button onclick="encode()">Encode PDF Document</button> </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> function encode(){ let doc = new jsPDF() doc.addPage() doc.text("hello world this is second page",10,10) doc.text("this is some more text",20,20) let output = doc.output() let url = "data:application/pdf;base64," + btoa(output) let iframe = `<iframe width="100%" height="100%" src="${url}"></iframe>` let x = window.open() x.document.open() x.document.write(iframe) x.document.close() document.location.href = url } </script> </html> |