Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
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

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme