jsPDF Tutorial to Convert or Encode Output PDF File to Base64 String in Javascript Full Example For Beginners

jsPDF Tutorial to Convert or Encode Output PDF File to Base64 String in Javascript Full Example For Beginners

 

 

 

Welcome folks today in this tutorial we will be looking on how to convert the output pdf which is generated by jspdf library in javascript to a base64 string . All the source code of the example will be shown below.

 

 

 

Get Started

 

 

 

In order to get started first of all create a index.html file inside the root directory of the project and copy paste the following block of code

 

 

index.html

 

 

<!doctype>
<html>
<head>
   <title>jsPDF Convert PDF to Base64 String</title>
   <script type="text/javascript" src="  https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
</head>
<body>

<a href="javascript:demo1()">Run Code</a>

</body>
</html>

 

 

Here in this block of code we are using the library namely jspdf to generate the pdf file. So here we are including the cdn of the jspdf library which stands for content delivery network. You can also download the jspdf javascript file locally into your folder to include it

 

After this we have created a a tag and binded a special onclick listener to it. So whenever you click it we will be executing a method demo1 to convert pdf to base64 string.

See also  jQuery Lettering.js + Tweenmax.js Moving Letter Animation in HTML5 CSS3 and Javascript Full Example Project For Beginners

 

 

 

 

index.html

 

 

<!doctype>
<html>
<head>
   <title>jsPDF Convert PDF to Base64 String</title>
   <script type="text/javascript" src="  https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

       <script type="text/javascript">

        function demo1() {
            var doc = new jsPDF()
            doc.addPage();
            doc.text(20, 20, 'Hello world!');
            doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

            // Making Data URI
            var out = doc.output();
            var url = 'data:application/pdf;base64,' + btoa(out);
            
            var iframe = "<iframe width='100%' height='100%' src='" + url + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();

            document.location.href = url;
         }
    </script>
</head>
<body>

<a href="javascript:demo1()">Run Code</a>

</body>
</html>

 

 

Now we have written custom javascript code inside this function we have created a pdf file in jspdf and then we have encoded to base64 string using btoa method in javascript.

 

btoa : It is a special method built in javascript which converts a string to base64

 

And also we converted firstly our pdf file to string using the output method which is available inside jspdf

 

doc.output actually converts pdf to string

 

Now if you open index.html file inside browser you will see we have surrounded base64 string inside a iframe tag which is shown below

See also  Build a jQuery Hangman Word Guessing Game in Browser Using HTML5 and Javascript Full Project For Beginners

 

 

 

 

Leave a Reply