ReactPDF renderToFile not rendering arabic text

Question

I'm trying to render PDF to file but the arabic text in the PDF displays as some encoded text like *BFJ) 'DE9DHE'*, 1'4/ 'D9H6J, *0C1) EF, etc..

-- API --


import { renderToFile } from '@react-pdf/renderer';
import TicketDownloadPDF from '@/sections/@dashboard/ticket/view/TicketDownloadPDF';


export async function handler(req: NextApiReq, res: NextApiResponse) {
  try {
    const { selected } = req.body;

    const selectedTickets = await tickets.find({ _id: { $in: selected } })

    await renderToFile(<TicketDownloadPDF ticket={selectedTickets[0]} />, 'file1.pdf');

    res.status(200).json({ message: 'weewuu' });
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal server error' });
  }
}

Valeriia · Answer 1 · 2023-08-01T07:44:34.677

0

You need to register Arabic font separately in your code, but first install fontkit module to be able to upload custom fonts:

To do this, use the command: npm install @react-pdf/fontkit

Then add registration of your previously downloaded font in the code:

import { renderToFile } from '@react-pdf/renderer';
import { Font } from '@react-pdf/renderer';
import path from 'path';
import TicketDownloadPDF from '@/sections/@dashboard/ticket/view/TicketDownloadPDF';

const fontPath = path.resolve('/fonts/ArabicFont.ttf'); // Set you own path here

Font.register({
  family: 'ArabicFont',
  src: fontPath,
});

export async function handler(req, res) {
  try {
    const { selected } = req.body;
    const selectedTickets = await tickets.find({ _id: { $in: selected } });

    await renderToFile(<TicketDownloadPDF ticket={selectedTickets[0]} />, 'file1.pdf');

    res.status(200).json({ message: 'weewuu' });
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal server error' });
  }
}

Now you should be able to see Arabic symbols properly in a rendered file. However you should keep in mind that Arabic letters are directed right to left. This can be supported by creating a StyleSheet object with writingMode parameter set to rl and reuse it as a style for TicketDownloadPDF.

If you feel any unclarity or concerns, please let me know.

edited Aug 01 '23 at 07:44

answered Jul 29 '23 at 15:12

Valeriia

586
2
4
21

where are we using `@react-pdf/fontkit` module – buga Jul 31 '23 at 03:21
I'm getting `[Error: ENOENT: no such file or directory, open '/Users/rashidalawadhi/Code/SSC Projects/ticketing-system/.next/server/pages/api/section/ticket/fonts/Vazirmatn-Regular.ttf']` – buga Jul 31 '23 at 08:04
the font is not being added to .next build – buga Jul 31 '23 at 08:05
Hmm it's hard to say without seeing your project structure. Try adding the font file to public/fonts directory and update the paths respectively. Then rebuild your project. – Valeriia Jul 31 '23 at 10:04
adding the font to public/font only works when I render pdf on cilent-side, because `src: '/fonts/ArabicFont.ttf'` would point to the file in public folder. but it doesnt work that way when rendering on serverside, cause its trying to point to file path location – buga Aug 01 '23 at 03:50
its working when I do `src: 'http://localhost:8081/fonts/ArabicFont.ttf'` – buga Aug 01 '23 at 03:59
Make sure that fonts folder is added to your paths (https://stackoverflow.com/a/58091542/15952589), or probably this is the issue with your project configuration in general, I'm not sure. Did you succeed in rendering Arabic symbols locally? – Valeriia Aug 01 '23 at 07:42
this problem is occurring locally – buga Aug 01 '23 at 08:15
how can I add fonts folder to next.js paths? the post you referenced is for express – buga Aug 01 '23 at 08:16

ReactPDF renderToFile not rendering arabic text

1 Answers1