Jspdf-autotable: The header font style does not change

Created on 31 Dec 2019  ·  7Comments  ·  Source: simonbengtsson/jsPDF-AutoTable

My table in the Arabic language thus I used Amiri font. The Amiri font changes the text to the Arabic language for the entire table except of table header.
I used the following code

    const unit = "pt";
    const size = "A4"; // Use A1, A2, A3 or A4
    const orientation = "portrait"; // portrait or landscape

    const marginLeft = 40;
    const doc = new jsPDF(orientation, unit, size);

    // doc.setFontSize(15);
    doc.addFileToVFS("Amiri-Regular.ttf", AmiriRegular);
    doc.addFont('Amiri-Regular.ttf', 'Amiri', 'normal');

    doc.setFont('Amiri'); // set font
    doc.setFontSize(10);


    const title = "تقرير";
    const headers = [Object.keys(props.data[0])];

    const data = props.data.map(elt => {
        return Object.values(elt)
        // return [elt.name, elt.profession]
    });

    let content = {
        startY: 50,
        head: headers,
        body: data,
        fillColor: [155, 89, 182],
        styles: {
            font: 'Amiri'
        },
        headStyles: {font:'Amiri'},
    };

    doc.text(title, marginLeft, 40);
    doc.autoTable(content);
    doc.save("report.pdf")

Screenshot from 2019-12-31 06-56-00

question

Most helpful comment

This is tricky, the problem is, you added only the normal font-face, and the head style is bold so it doesn't find the bold variant of the font, to fix this, either add the bold font-face or just simply use the normal font-face for the heading like this :

headStyles: { font: "Amiri", fontStyle: 'normal', halign: "right" },

All 7 comments

I can't reproduce it, I'm using an Arabic font and it's working as expected, although I added the font after converting it to a JS file using jsPDF font-converter.

If you run the custom example @al-ani. Can you get that to work? What is the difference if so between yours and that example?

If you run the custom example @al-ani. Can you get that to work? What is the difference if so between yours and that example?

This is an example of my code
https://jsfiddle.net/alaney/sg7q1mb9/1/#

This is tricky, the problem is, you added only the normal font-face, and the head style is bold so it doesn't find the bold variant of the font, to fix this, either add the bold font-face or just simply use the normal font-face for the heading like this :

headStyles: { font: "Amiri", fontStyle: 'normal', halign: "right" },

Many thanks @mmghv

thank! Add fontStyle: 'normal', help for me too. I am using cyrillic fonts
Снимок экрана от 2020-04-10 07-48-46

fixed
Снимок экрана от 2020-04-10 08-28-31

thank! Add fontStyle: 'normal', help for me too. I am using cyrillic fonts
Снимок экрана от 2020-04-10 07-48-46

fixed
Снимок экрана от 2020-04-10 08-28-31

Can I find out which font you used?

Was this page helpful?
0 / 5 - 0 ratings