How to generate pdf with arabic and english content in react application using jsPDF and pdf-autotable?

Question

Currently, I am using jsPDF and pdf-autotable to generate the pdf programmatically using the object data. I am using Amiri font and converted to base64 which gives me a js file. I have the exported font variable and import it into the component where I have exportPdf functions in one of react components.

Here is my current implementation.

  const exportToPdf = (demographicsInfo) => {
const pdf = new jsPDF();
const lineHeight = 10;

// Set up the initial position for the layout
let currentY = lineHeight;

pdf.addFileToVFS('Amiri-Regular.ttf', amiriFont);
pdf.addFont('Amiri', 'Amiri', 'normal');
pdf.setFont('Amiri');

  
pdf.autoTable({
  startY: currentY,
  head: [['Key', 'Value']],
  headStyles: { fontStyle: "Amiri" }, // For Arabic text in the table head
  bodyStyles: { fontStyle: "Amiri" },
  body: Object.keys(demographicsInfo).map((key) => [key, demographicsInfo[key]]),
});
pdf.save('exportedData.pdf');

};

I have imported amiriFont at the top BTW.

Not sure why this not working. Font-related files are public/fonts folder. I have tried all possibilities and searched all over.

Can someone help where I am doing wrong?

Answer 1

To change font with jspdf-autotable you set it with font and not fontStyle.