Custom font faces for jspdf-autotable plugin

Question

Can someone help with an example for setting custom fonts for jspdf-autotable

I tried the following

var doc = new jsPDF('p', 'pt');
doc.setFont("rotobo");      ----> font face name that I declared in my css file
doc.autoTable(columns, data);
doc.save("table.pdf");

After I tried this, the fonts in PDF did not change.

Any suggestions would be appreciated.

Answer 1

Try something like this.

doc.autoTable(columns, data, {styles: {font: "rotobo"}});

or

You can refer more on Custom style example here and the doc README.md shows all the styles.

Answer 2

You can use

console.log(doc.getFontList());

to check what fonts they support. It seems that they only support these fonts:

[Courier] [Helvetica] [Times] [ZapfDingbats] [courier]

If you want to show a check mark in your PDF file, this plug-in may not have the capabilities to do that...

Answer 3

To fix the problem, you need to do:

1. Download the jspdf-autotable, to work local
2. In the jspdf-autotable, there is 2 time calling to text(...) function, so you need to add setFont before calling to text function

The code you need to change:

jsPDF.API.autoTableText = function (text, x, y, styles) {
    styles = styles || {};
    var FONT_ROW_RATIO = 1.15;
    if (typeof x !== 'number' || typeof y !== 'number') {
        console.error('The x and y parameters are required. Missing for text: ', text);
    }
    var k = this.internal.scaleFactor;
    var fontSize = this.internal.getFontSize() / k;
    var splitRegex = /\r\n|\r|\n/g;
    var splitText = null;
    var lineCount = 1;
    if (styles.valign === 'middle' || styles.valign === 'bottom' || styles.halign === 'center' || styles.halign === 'right') {
        splitText = typeof text === 'string' ? text.split(splitRegex) : text;
        lineCount = splitText.length || 1;
    }
    // Align the top
    y += fontSize * (2 - FONT_ROW_RATIO);
    if (styles.valign === 'middle')
        y -= (lineCount / 2) * fontSize * FONT_ROW_RATIO;
    else if (styles.valign === 'bottom')
        y -= lineCount * fontSize * FONT_ROW_RATIO;
    if (styles.halign === 'center' || styles.halign === 'right') {
        var alignSize = fontSize;
        if (styles.halign === 'center')
            alignSize *= 0.5;
        if (lineCount >= 1) {
            for (var iLine = 0; iLine < splitText.length; iLine++) {
                this.text(splitText[iLine], x - this.getStringUnitWidth(splitText[iLine]) * alignSize, y);
                y += fontSize;
            }
            return this;
        }
        x -= this.getStringUnitWidth(text) * alignSize;
    }
    if (styles.halign === 'justify') {
        this.setFont("frank");   //---> this u need to adding
        this.setFontType("normal");
        this.text(text, x, y, { maxWidth: styles.maxWidth || 100, align: 'justify' });
    }
    else {
        this.setFont("frank"); //---> this u need to adding
        this.setFontType("normal");
        this.text(text, x, y);
    }
    return this;
}; 

Answer 4

For angular:

exportToPDF() {
    const doc = new jsPDF('p', 'pt', 'letter');

    autoTable(doc, {

      startY: 70,
      theme: 'grid',
      bodyStyles: { lineColor: [0, 0, 0] },
      styles: { overflow: 'linebreak', fontSize: 7, font: 'helvetica' },
      didParseCell: function (data) {
        console.log(data.cell.text[0] );
        if (data.cell.text[0] == "IDENTIFICACIÓN DEL CARGO") {
          data.cell.styles.halign = 'center';
        }
      },
      html: '#my-table',
    });
    doc.save('mypdf');


  }