Welcome folks today in this blog post we will be adding arabic custom fonts in pdf document using jspdf & html2canvas library in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to include the jspdf
library cdn as shown below
1 2 3 4 5 6 7 8 9 10 |
<!doctype> <html> <head> <title>jsPDF Convert PDF to Base64 String</title> <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> </head> <body> </body> </html> |
Now we need to add the div tag inside it we will be adding the custom arabic
text inside the html
1 2 3 |
<div id="divIdToPrint"> <h1>مرحبا اسمي جوتام</h1> </div> |
Now we need to write the javascript code where we will be taking the screenshot of the custom arabic text
using html2canvas library and then we will be exporting the canvas image to pdf document by adding the image using the jspdf library.
1 2 3 4 5 6 7 8 |
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"); }); |
As you can see in the above code we are getting the reference of the div
element and then we are calling the html2canvas()
constructor and after taking the screenshot we have the canvas image and after that we are converting the canvas image to base64 url and adding it to the pdf document using the jspdf library. And after that we are saving the pdf document using the save()
method.