Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on December 16, 2022

 

 

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.

 

 

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

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme