Skip to content

Coding Shiksha

Menu
  • Home
  • Youtube Channel
  • Online Store
  • Online Tools
  • Donate Us
  • Sitemap
  • Privacy Policy
Menu

jsPDF Tutorial to Encode PDF File into Base64 Code & Embed Using IFrame in Browser Using Javascript

Posted on October 28, 2022

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

 

 

JavaScript
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.

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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>

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme