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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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.
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 |
<!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
