Font Name and Style in PDF

[ruhijain]

How can i set font family and font style in the PDF table i created using jsPDF Autotable Plugin? I am able to set the font size but not sure about setting font family and type.

[simonbengtsson]

If you set font family using jspdf before calling ´autoTable()´ it should use that. Font style has to be set in either renderHeaderCell or renderCell. Styling is simplified in the upcoming version 2.0 however so this might change.

[ruhijain]

I tried doc.font("Helvetica","normal"); before doing autoTable()
But the font family did not work out for me in the tables.

[simonbengtsson]

Then you probably need to do it in the renderCell functions. I dont change the font anywhere in the plugin however so it is somewhat strange.

[ruhijain]

Sorry to bother you but Can you tell me exact code i should write to set font family and style. I do not find any similar thing done in example code and the code repository. So, I am not sure of the syntax to be used.

[simonbengtsson]

Sure! Take a look at the default implementation of the drawHeaderCell and drawCell to specify custom font styles. In terms of font you can simply do something like this codeen:

    var doc = new jsPDF('p', 'pt');
    doc.setFont("courier");
    doc.autoTable(columns, data);
    console.log(doc.getFontList()); // Available fonts their font styles
    doc.save("table.pdf");

[ruhijain]

Thanks i will try that. Quick question:
Can i set a table border? I have check for doc.rect, but seems its working for individual cell. I just want border of the complete table in pdf not the cells. Anything to cater that?

[simonbengtsson]

I suppose you could draw a line manually around the table with doc.line(). However, there is now feature in the plugin to do it. It's a good idea though and I might add that in version 2.0.

[ruhijain]

Line drawing can be done but is there any direct way to understand the table height width or coordinates to draw those line around 4 sides?

[simonbengtsson]

After calling autotable, you can call autoTableEndPosY() to get the y position of the final row. The table width is basically pageWidth minus the margins.

[ruhijain]

okay cool. I guess i have managed to get the border the way i wanted by just using renderCell with the help of path-painting operators. But surely useful information given.

[simonbengtsson]

Cool! You mind sharing that code?

[ruhijain]

Sure, I have used the same piece of code in renderHeaderCell and renderCell. I believe the main purpose for this is too make cell border rectangle but eventually it work as a table border too.

//Render Table HeaderCell
var tableHeader = function (x, y, width, height, key, value, settings) {
doc.setFillColor(220, 20, 60); //red
doc.setTextColor(255, 255, 255);
doc.setFontStyle('normal');
doc.setLineWidth(0.2);

            doc.rect(x, y, width, height, 'B');
            doc.text(value, x + settings.padding, y+15);

        };
        //Render Cell
        var tableDataCell = function (x, y, width, height, key, value, row, settings) {
        // Alternate colors for row
            if (row%2===0) {
                doc.setFillColor(211, 211, 211); // Gray alternate colors
            }
            else
            {
                doc.setFillColor(255,255,255);
            }

            doc.setTextColor(0, 0, 0);
            doc.setFontStyle('normal');
            doc.setLineWidth(0.2);
            doc.rect(x, y, width, height, 'B');
            doc.text(value, x + settings.padding, y+15);



         };

[gadamshetty]

I want to ask this question again as custom fonts is not working for me, I tried the following

var doc = new jsPDF('p', 'pt');
doc.setFont("roboto"); --> name of the font face from my css file i defined for google
roboto font
doc.autoTable(columns, data);

Appreciate your thoughts

[Betterteng]

Hi, could you please point out that where can I change the default font in the source code? Or how can I make this plug-in support more font-families?

So far, I want to add a [check mark] or [square root] to the PDF and I've used doc.getFontList() to check if any fonts that this plug-in supports can insert the Unicode [\u221A] in the String and display this [square root] symbol in PDF file properly.

It seems no way to get that. So, I'm asking again, can I change the default font in the source code? I want to change the font-family to 'Arial'.

Thanks a lot~

[simonbengtsson]

There is currently no support for changing font I'm jspdf. But there is a fork that works towards supporting it so you would have to use the that.