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

user_2584903 0
Viewed 2370

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 if that fails for you, and for me on Windows it seemed to be a rabbit hole, surely there's another way to get the data in place. Yep.

Option 1 is to modify the vsf_fonts.js and pdfmake.js in the node_modules/pdfmake/build directory. In the first you're going to add your data, and in the second your're going to modify the defaultClientFonts object. I admit I'm leaving that a bit vague because the problem is, if you ever run a "npm update" or similar, you'll wipe out all those changes, option 2 below is much better, as it leaves all the stock code alone, and ultimately it's simpler. No need to verbosely and exactly describe a method that can work, that I, probably everyone else, recommends against.

My application was Angular 8 setup generating check PDFs client-side. So I needed a MICR font for that. (Edit to add: still worked when I upgraded to Angular 9, and Angular 10, and Angular 11.)

The solution to "how to use custom fonts" that I came up with is below.

pdfmake angular javascript
1 Answers
  • 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.
user_25849030
Related