Welcome folks today in this post we will be adding arabic custom font
inside pdf document with the help of jspdf
and html2canvas
library. All the source code of the application is shown below.
Get Started
In order to get started you need to add the following libraries which are jspdf
and html2canvas
we will be adding their cdn
. So make a index.html
file and copy paste the following code to include the cdn.
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>jsPDF Arabic Font Example</title> </head> <body> </body> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script src=" https://unpkg.com/html2canvas@1.0.0-rc.5/dist/html2canvas.js"></script> </html> |
Now we will add a div
element where we will add the arabic text
to convert to pdf. So make this div
tag and give a unique id to it
1 2 3 |
<div id="divIdToPrint"> <h1>مرحبا اسمي جوتام</h1> </div> |
So you can see we have added a simple h1
tag and inside it we have written some arabic
text. And now we need to include some custom javascript
to build the application
1 2 3 4 5 6 7 8 9 10 |
<script> const input = document.getElementById('divIdToPrint'); html2canvas(input) .then((canvas) => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'PNG', 0, 0); pdf.save("download.pdf"); }); </script> |
So now if you open the index.html
file you will see the following result
Full Source Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>jsPDF Arabic Font Example</title> </head> <body> <div id="divIdToPrint"> <h1>مرحبا اسمي جوتام</h1> </div> </body> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script src=" https://unpkg.com/html2canvas@1.0.0-rc.5/dist/html2canvas.js"></script> <script> const input = document.getElementById('divIdToPrint'); html2canvas(input) .then((canvas) => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'PNG', 0, 0); pdf.save("download.pdf"); }); </script> </html> |