How can I use pdfmake custom fonts in Angular without using the gulp tool?

Question

The standard method for installing custom font files is via the gulp tool, and that\'s described here: https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/

But

Answer 1

• First, you're going to need to get your ttf font, and convert it to something usable. Base64 encode it using a tool like https://www.base64decode.org/ (be sure to switch to encode and scroll down a bit to drop a file on there)
• Now you have a file like: "encoded-20200619201035.txt"
• Create a new file, I called my GnuMICR.ttf.Base64.encoded.ts
• Copy/paste the entire contents of your encoded file in there into a variable you export. MICR is a tiny font and it's over 6,000 characters long, so the "....." you see there is the 6,000 charters I'm not blowing up stackoverflow with that would make this unreadable

GnuMICR.ttf.Base64.encoded.ts file contains just this one line:

export const strGnuMICR:string = "AAEAAAALAIAAA.....FDAUQCQ1IAAAA=";

Now in the main code you're working in, you need the regular pdfmake includes at the top:

import pdfMake       from 'pdfmake/build/pdfmake'
import pdfFonts      from 'pdfmake/build/vfs_fonts'

as well as importing your font (mine was in a subdirectory I made called fonts. Don't use the assets subdirectory, that will work in dev, but won't get pulled in for proper builds):

import { strGnuMICR } from './../../fonts/GnuMICR.ttf.Base64.encoded'

pdfmake talks about a "virtual file system" and that's implied when you see the variable "vfs_fonts" but really, it's just an array. You'll also see that the defaults are filenames like 'Roboto-Regular.ttf' but again that's not a file on a virtual file system: 'Roboto-Regular.ttf' is just the name of the data in the vfs_fonts.js array. For clarity, you're not doing anything with actual files, it's all using the base64 encoded variable you've built already.

Down to where you're doing the work in your main code:

 generatePDF(){
 
 // this adds our base64 encoded data to the existing 'virtual file system'
 pdfFonts.pdfMake.vfs['GnuMICR_b64']=strGnuMICR
 
 // you're going to wipe out the standard stuff when you create this
 // variable, so we need to add the stock Roboto fonts back in. I 
 // set all fonts to the same thing, as "italic MICR" would be silly. 
 pdfMake.fonts = {
     Roboto: {
         normal:      'Roboto-Regular.ttf',
         bold:        'Roboto-Medium.ttf',
         italics:     'Roboto-Italic.ttf',
         bolditalics: 'Roboto-MediumItalic.ttf'
     },
     GnuMICR:{
         normal:      'GnuMICR_b64',
         bold:        'GnuMICR_b64',
         italics:     'GnuMICR_b64',
         bolditalics: 'GnuMICR_b64'
     },
 }
 // that's it, all the install work is done
 
 // build the pdf, using our new font via a style we define
 let docDefinition = 
     {
     content: [
         {text:'regular Roboto text'},
         {text:'and a line of MICR text follows:'},
         {text:'C11111111C A222222222A 333333333C 0123456789',style:'micr'},
         ],
     styles:{
         micr:{
             font: 'GnuMICR',
             fontSize: 12,
             }
         },
      defaultStyle:{
          font: 'Roboto',
          fontSize: 15,
          }
      };
 
     // annnnnnd generate that PDF!!
     pdfMake.createPdf(docDefinition).open();
  }      

Benefits:

• Don't have to install/fight the gulp tool
• Your fonts live in your code base, so they can be in version control
• Pretty easy

Drawbacks:

• You're not adding this font to the pdfmake "library" available systemwide, so you're doing this each time you write some code to make PDFs. If you're writing a jillion different PDF making utilities, the other methods might be better suited to to you. If you need to make just one, or a couple, not a big deal.