[Vuejs]-How to change the font in tables? setFont() only changes the title font

by

0👍

There’s a minor issue in the way you are setting the font for the table text. Here’s the corrected version of your method:


    generatePDF() {
        let doc = new jsPDF({ orientation: 'l', format: 'a4' });
        doc.addFileToVFS('NEWFONT.TTF', NEWFONTS);
        doc.addFont('NEWFONT.TTF', 'newFontType', 'normal');
        doc.setFont('newFontType');
        doc.setFontSize(20);
    
        let header = ['id', 'name', 'quantity'];
        const title = 'All Data';
        const titleWidth = (doc.getStringUnitWidth(title) * doc.internal.getFontSize()) / doc.internal.scaleFactor;
        const xPos = (doc.internal.pageSize.getWidth() - titleWidth) / 2;
        const yPos = 20;
        doc.text(title, xPos, yPos);
        
        doc.setFont('newFontType', 'normal'); // Remove this line, it's not needed
        doc.autoTable({
            startY: 30,
            head: [header],
            body: this.data,
            theme: 'grid',
        });
    
        doc.save('Report1' + '.pdf');
    
        doc = null;
    },

The issue was with the line doc.setFont('newFontType', 'normal');. This line is unnecessary since you already set the font to 'newFontType' earlier using doc.setFont('newFontType');. The autoTable function of jsPDF-AutoTable library, which you are using to generate the table, will automatically inherit the current font settings, so you don’t need to set it again.

With the corrected method, the text in the table will also be using the ‘newFontType’ font. The rest of your code looks good for generating a PDF file with a table and custom font using jsPDF in a Vue application.

Leave a comment