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

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

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

<!DOCTYPE html>

<head>

<title>jspdf encode pdf to base64 code</title>

</head>

<body>

</body>

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

<button onclick="encode()">Encode PDF Document</button>

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

function encode(){
        let doc = new jsPDF()
        doc.addPage()
    }

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.

doc.text("hello world this is second page",10,10)
doc.text("this is some more text",20,20)

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

let output = doc.output()

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

let url = "data:application/pdf;base64," + btoa(output)

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

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

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

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