[SOLVED] jsPDF not rendering tamil text properly

jsPDF not rendering tamil text properly

I am trying to generated invoice in tamil text using JSPDF with React-js. I have created a application which has print button and upon clicking it should generate PDF which I have described inside generateBill. I have added entire code in App.js file like below,

import React from 'react'
import { jsPDF } from "jspdf";
import {font} from './Lohit-Tamil-normal'

function App() {

function generateBill(event)
{
   //Intializing jspdf 
   const doc = new jsPDF('p','mm',[200,80])
   //Importing custom font for tamil
   doc.addFileToVFS('Lohit-Tamil.ttf', font);
   doc.addFont('Lohit-Tamil.ttf', 'Lohit-Tamil', 'normal')
   doc.setFont('Lohit-Tamil');
   //Adding text to pdf document
   doc.text("பாத்திரக்கடை", 30,20);
   //Calculating today date to display in PDF
   let today = new Date();
   let dd = String(today.getDate()).padStart(2, '0');
   let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
   let yyyy = today.getFullYear();
   today = dd + '/' + mm + '/' + yyyy;
   //Displaying today's date 
   doc.text(`தேதி: ${today}`, 5, 25, null, null, "left");
   //Displaying customer name
   doc.text(`வாடிக்கையாளர் பெயர்:`, 5, 30, null, null, "left");
   //Setting tamil as language for PDF
   doc.setLanguage("ta")
   //saving the PDF file
   doc.save('autoprint.pdf');
}

return (
<button type="button" onClick={generateBill}>Print</button>
    </div>
  );
}

Code inside imported font file - Lohit-Tamil-normal.js:

export const font = '[base64_encoded_text_of_ttf_file]';

But when I try to generated pdf, I am getting the text misplaced like below.

Actual pdf:

But what I expect to be like:

Few of the text like "டை,தே" are getting misplaced in front and back. But when I tried to copy the text from PDF and paste it in my system, I am getting it proper. It will be great if anyone could shed some light and get this issue fixed.

Solution