Pdfmake: How to pass custom vfs_fonts.js file to createPdf function?

[cmfc31]

Hi, I compiled a custom vfs_fonts.js file with Roboto and Times New Roman font. And it's working nice, but I had to modify the pdfmake source files in my node_modules folders. This folder isn't synced with my repository and I'd like to share this file with my coworkers and be able to use it/call it from pdfmake at the same time. But I cannot find a way to call my vfs_fonts file.

In the documentation, you mention that alternatively, instead of changing the global value, you can pass the fonts object directly to createPdf.

pdfMake.createPdf(docDefinition, null, fonts)

// The full signature of createPdf looks like this.
// tableLayouts, fonts and vfs are all optional - falsy values will cause
// pdfMake.tableLayouts, pdfMake.fonts or pdfMake.vfs to be used.
pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)

Do you have a detailed example of this scenario? How can I pass my vfs_fonts directly to the createPdf funcion?

[liborm85]

vfs_fonts file does not have to be in node_modules, you can put it where you want.

Examples are available in documentation. Instead of global pdfMake.vfs can be used local variable with the same content.

[MussaCharles]

@cmfc31 I am exactly in the same situation, did you get it to work?

@liborm85 I followed the link to the doc you referenced but there is no information on how to reference "fonts" parameter passed in pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs), from my vfs_fonts.js file living in a separate folder/path. Can you please elaborate this ?

Note: I tried to import something like import pdfFonts from "./../../../fonts/vfs_fonts but I get Maximum call stack size exceeded error.

UPDATES: -
I got it working on the server side by doing this

const fonts  = {
    NanumGothic: {
      normal: './backend/fonts/NanumGothic-Regular.ttf',
      bold: './backend/fonts/NanumGothic-Bold.ttf',
      italics: './backend/fonts/NanumGothic-Regular.ttf',
      bolditalics: './backend/fonts/NanumGothic-Bold.ttf'
    }
  };

But I would like to hear your thoughts on browser side, thanks.

[cmfc31]

Hi @MussaCharles! Yeah I was able to get it to work .

Here's what I do when I want to add an extra font to my project.

1) First I compile the desired fonts with the shell script provided at.
https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/shell/

This generates a new _vfs_fonts.js_ with the encoded fonts.

2) As @liborm85 said you don't need to modify the vfs_fonts included in the node_modules folder. I made a copy of that file because I still want to keep using the default roboto font. So I renamed my copy to _customVfs.js_, you can place it anywhere you want inside your repo, then just simply add the extra encoded fonts, what's important to remember are the name of the fonts, because you will specify them later when you're setting up the createPdf function.

I generate alot of pdf on my application so I created a main js file that includes the createPdf function, so I just simply import it and send it my dd template anywhere I want to create a new pdf. I also added a parameter to choose if I want to open the pdf or download it. So here's how my reportLib.js looks like.

import pdfMake from 'pdfmake/build/pdfmake'
import customVfs from './customVfs'

// Generates and export pdf file
export function generatePDF(mode, dd, filename) {
   // Use my custom font vfs
   pdfMake.vfs = customVfs.vfs

   // Specifying the fonts in the vfs file.
   pdfMake.fonts = {
      // Default font should still be available
      Roboto: {
         normal: 'Roboto-Regular.ttf',
         bold: 'Roboto-Medium.ttf',
         italics: 'Roboto-Italic.ttf',
         bolditalics: 'Roboto-MediumItalic.ttf'
      },
      // Times New Roman font added
      TimesNewRoman: {
         normal: 'Times-New-Roman-Regular.ttf',
         bold: 'Times-New-Roman-Bold.ttf',
         italics: 'Times-New-Roman-Italics.ttf',
         bolditalics: 'Times-New-Roman-BoldItalics.ttf'
      }
   }

   if (mode == 'open') {
      pdfMake.createPdf(dd).open()
   } else if (mode == 'save') {
      pdfMake.createPdf(dd).download(filename)
   }
}

3) With this done you'll be able to use your new font like this.

var dd = {
  content: [
    {text: 'Testing 1', font: 'TimesNewRoman'},
    {text: 'Testing 2', font: 'yourFontName'}
  ]
}

Or as a default style of your whole document

var dd = {
  content: (...),
  defaultStyle: {
    font: 'yourFontName'
  }
}

I can upload an example repo of my vue.js app if you want.

[MussaCharles]

@cmfc31 Thanks a lot for detailed explanation, This is a time saver. And yes if you can upload your vue.js example repo it will be a huge help for future references, please let me know the repo link for the example app when it is ready. Thank you