Импортируйте шрифт и создавайте PDF с помощью PDFmake из React js

Недавно мне пришла в голову идея создать биллинговое приложение с помощью React js, и я попытался использовать пакет JsPDF для создания PDF-файла. Но, к сожалению, он не работает должным образом со шрифтами на тамильском языке. Поэтому я искал лучший пакет npm и заставил его работать с PDFmake. Приходите, давайте рассмотрим, как импортировать шрифт и создать PDF-файл с помощью пакета PDFmake.

Необходимое условие:

• Возможно, нам потребуется установить React js, а также включить пакет PDFmake в наш проект, чтобы начать работу.

npx create-react-app ‹project_name›
npm и pdfmake

• Также вам может понадобиться загрузить наши необходимые шрифты (файл с расширением .ttf) из Google или из любого другого места, где они доступны. Я скачал шрифт на тамильском языке отсюда — Tiro font. Нажав кнопку Загрузить семейство, вы загрузите шрифты.

Преобразование шрифта в файл base64:

• Первым шагом будет преобразование шрифта в файл base64, чтобы мы могли использовать его в нашем файле PDF.
• Загрузите загруженный файл шрифта (TiroTamil-Regular.ttf) на следующий веб-сайт — ссылка.
• После этого вы получите файл, преобразованный в текст в кодировке base64.
• Скопируйте этот закодированный текст.

Экспорт закодированного шрифта в наш проект React:

• Создайте файл с именем «TrioTamil-Regular.js».
• Вставьте скопированный закодированный текст и экспортируйте постоянный шрифт,

export const font = "<your_encoded_text_should_be_pasted_here>"

Импорт требуемого шрифта:

• Теперь пришло время импортировать необходимый шрифт в наш проект React js.
• Используя приведенные ниже команды импорта, мы импортируем pdfmake и шрифты для создания нашего PDF-файла.

//importing pdfmake to generate our PDF file
import pdfMake from "pdfmake/build/pdfmake"
//importing the fonts whichever present inside vfs_fonts file
import pdfFonts from "pdfmake/build/vfs_fonts"
//importing the encoded font file into our project
import {font} from './TiroTamil-Regular'
//Making use of all the fonts defined
pdfMake.vfs = pdfFonts.pdfMake.vfs
//Adding our own font into the vfs
window.pdfMake.vfs["TiroTamil-Regular.ttf"] = font

Создание PDF-файла:

• Внутри файла App.js нашего реактивного проекта допустим только один тег ‹div›.
• Внутри тега ‹div› создайте кнопку, которая вызовет функцию с именем printPDF, как показано ниже.

• Теперь давайте напишем нашу функцию printPDF() для создания файла PDF,

• Наш окончательный файл App.js будет выглядеть следующим образом:

Создание файла PDF из нашего проекта:

• Все готово! Теперь нам нужно запустить наш проект React с помощью следующей команды:

npm run start

• Теперь вы откроете домашний экран нашего проекта с кнопкой printPDF,

• Нажмите на кнопку printPDF, вы получите файл PDF с текстом, который вы упомянули в содержимом.

Ура!! мы сделали. Хотите узнать больше о PDFmake? Вы можете воспользоваться их игровой площадкой — нажмите здесь.

Выше упоминался мой способ импорта шрифта, может быть и больше способов. Комментарий ниже, если вы столкнулись с каким-либо другим способом. Следуйте за мной для получения дополнительной информации.

Удачного кодирования!