I am using jsPDF with jspdf-autotable to generate a Right-to-Left (RTL) PDF report in Arabic. Everything works perfectly, but the headers appear as garbled/corrupt text instead of proper Arabic characters.
const handlePDFExportArabic = () => {
const doc = new jsPDF({ orientation: "landscape" });
// ✅ Add Arabic Font
doc.addFileToVFS("Amiri-Regular.ttf", arabicFont);
doc.addFont("Amiri-Regular.ttf", "Amiri", "normal");
doc.setFont("Amiri");
// ✅ Set Right-to-Left (RTL)
doc.setLanguage("ar");
// ✅ Title in Arabic (Centered)
doc.text("📄 قائمة عملاء الائتمان", 287, 16, {
align: "right",
lang: "ar",
});
// ✅ Create AutoTable with Arabic Headers
autoTable(doc, {
startY: 20,
head: [
[
"رقم الطلب",
"رقم الحساب",
"اسم العميل",
"الفرع",
"الحد الائتماني",
"رقم السجل التجاري",
"حالة السجل التجاري",
"الحالة",
],
],
body: rowData.map((row) => [
row.RequestId || "غير متوفر",
row.AccountNumber || "غير متوفر",
row.customerInfo?.[0]?.commercialNameArabic || "غير متوفر",
row.branchIdArabic || "غير متوفر",
row.customerInfo?.[0]?.capital
? row.customerInfo[0].capital
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " ريال"
: "غير متوفر",
row.customerInfo?.[0]?.crNumber || "غير متوفر",
new Date(row.customerInfo?.[0]?.crEndDateGregorian) > new Date()
? "✔️ ساري"
: "❌ منتهي",
row.Status.includes("Waiting")
? "⏳ قيد المراجعة"
: row.Status.includes("Approved")
? "✅ مقبول"
: row.Status.includes("Rejected")
? "❌ مرفوض"
: "غير متوفر",
]),
theme: "grid",
margin: { top: 30 },
styles: {
font: "Amiri",
fontSize: 10,
useUnicode: true,
halign: "right",
},
headStyles: { fontStyle: "bold", font: "Amiri", halign: "right", useUnicode: true },
columnStyles: {
0: { cellWidth: "wrap" },
1: { cellWidth: "wrap" },
2: { cellWidth: "wrap" },
3: { cellWidth: 20 },
4: { cellWidth: "wrap" },
5: { cellWidth: "wrap" },
6: { cellWidth: 40 },
7: { cellWidth: "wrap" },
},
});
// ✅ Save PDF with Arabic Name
doc.save("قائمة_العملاء_الائتمانيين.pdf");
};
Problem ❌ Headers appear in garbled/unreadable text
I have already: Added useUnicode: true Applied font: "Amiri" Used doc.setLanguage("ar") Set halign: "right"
How can I fix the Arabic headers in jsPDF autotable
I found that i needed to mention the font style that i have added previously on this
doc.addFileToVFS("Amiri-Regular.ttf", arabicFont);
doc.addFont("Amiri-Regular.ttf", "Amiri", "normal");
doc.setFont("Amiri");
so my headstyles should look like this
headStyles: { font: "Amiri", fontStyle: "normal" }