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