jsPDF + Html2Canvas Tutorial to Add Arabic Custom Font inside PDF Document in Javascript

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

<!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>

<!doctype>

<html>

<head>

<title>jsPDF Convert PDF to Base64 String</title>

</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

<div id="divIdToPrint">
   <h1>مرحبا اسمي جوتام</h1>
</div>

<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.

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");  
  });

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.