CODEWITHSUNDEEP
jspdfjspdf-autotable
Ajay Vanaparthi
Ajay Vanaparthi

Reputation: 13

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

Upvotes: 1

Views: 2531

Answers (2)

Weam Adel
Weam Adel

Reputation: 260

  1. Go to google fonts and download Amiri font ( I have tried other Arabic fonts but they did not work for some reason).
  2. 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).
  3. 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.

  1. 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" },
});

Upvotes: 1

Amina Darwish
Amina Darwish

Reputation: 466

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

you have to add fontStyle in headStyles object

Upvotes: 3

Related Questions