in jspdf-autotable header arabic text breaking - jspdf

Question

document.autoTable({
head,
body,
startY: XX,
styles: { lineColor: '#c7c7c7', lineWidth: 0, cellPadding: 2, font: 'Helvetica' },
headStyles: { fillColor: '#ffffff', textColor: '#333333', font: 'Helvetica' },
bodyStyles: { fillColor: '#f5f5f5', textColor: '#333333', fontSize: 7, lineColor: '#c7c7c7', lineWidth: 0 }
});
head am passing as below:
const head = [{
content: "طيران الإمارات",
styles: { valign: 'centre', cellPadding: {top: 3}, fontSize: 9, fontStyle: 'bold', cellWidth: 110.6 },
},
{
content: 'Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
},
{
content: 'Tier Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
}
];
with Helvetica Font, Head Text showing as special characters.
Special Characters
With Custom font Its showing in Arabic but word is breaking
I have passed as header this "طيران الإمارات" but in pdf its showing as this طير لإما Breaking word

Answer 1

headStyles: { fillColor: '#bde4d1', textColor: '#333333' , fontStyle: 'Amiri' }
you have to add fontStyle in headStyles object

Answer 2

Go to google fonts and download Amiri font ( I have tried other Arabic fonts but they did not work for some reason).
Go to this converter tool to convert your font to base64 and download the generated JavaScript file (When converting your Amiri font, upload one .ttf file per time and not the full .zip folder, otherwise you will get an error. If you want to add more font variants upload and add them separately).
Go to your project and import the downloaded file (or add the script tag manually if you do not use modules).
import "./fonts/Amiri";
// .... here goes your code working with the table.
If you use jspdf-autotable library add the following code to its configs:
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" }, // For Arabic text in the table head
bodyStyles: { font: "Amiri" }, // For Arabic text in the table body
});
Full example with autotable would look like this:
import { jsPDF } from "jspdf";
import "jspdf-autotable";
import "../../../fonts/Amiri";
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" },
bodyStyles: { font: "Amiri" },
});