Search code examples
jspdfjspdf-autotable

in jspdf-autotable header arabic text breaking

 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

Solution

  • headStyles: { fillColor: '#bde4d1', textColor: '#333333' , fontStyle: 'Amiri' }

    you have to add fontStyle in headStyles object