Import font and create PDF with PDFmake from React js

I recently got an idea of making a billing application with React js and tried using JsPDF package for generating PDF file. But unfortunately, it doesn’t work with Tamil language fonts properly. So I was searching for a better npm package and got it working with PDFmake. Come let’s explore how to import font and create PDF file with PDFmake package.

Prerequisite:

• We may need to install React js and also include PDFmake package in our project to get started,

npx create-react-app <project_name>
npm i pdfmake

• Also you may need to download our required fonts(file with .ttf extension) from Google or where ever we have it available. I have download Tamil language font from here — Tiro font. By clicking on Download family button, you will get the fonts downloaded.

Converting font into base64 file:

• First step will be converting the font into base64 file, so that we can use it in our PDF file.
• Upload your downloaded font file(TiroTamil-Regular.ttf) into the following website — link.
• Once done, you will get the file converted into base64 encoded text.
• Copy that encode text.