javascript - How can I use pdfmake custom fonts in Angular without using the gulp tool? - Stack Overflow

admin管理员组

文章数量:1318147

The standard method for installing custom font files is via the gulp tool, and that's described here: /

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, remends against.

My application was Angular 8 setup generating check PDFs client-side. So I needed a MICR font for that. (Edit to add: still working on all the Angular versions up to current Angular 17.)

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

Edit: Note that pdfmake v0.2.15 in late 2024 changed the VFS structure. Original is for v0.2.14 or lower, added v0.2.15.

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, remends against.

My application was Angular 8 setup generating check PDFs client-side. So I needed a MICR font for that. (Edit to add: still working on all the Angular versions up to current Angular 17.)

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

Edit: Note that pdfmake v0.2.15 in late 2024 changed the VFS structure. Original is for v0.2.14 or lower, added v0.2.15.

• javascript
• angular
• pdfmake

Share Improve this question Follow edited Nov 7, 2024 at 0:44 MotoRidingMelon asked Jun 20, 2020 at 2:02 MotoRidingMelonMotoRidingMelon 2,56722 gold badges2222 silver badges2929 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

• 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/ (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 // v0.2.14 or less
 pdfFonts['GnuMICR_b64']=strGnuMICR // v0.2.15 or more
 
 // 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.

本文标签： javascriptHow can I use pdfmake custom fonts in Angular without using the gulp toolStack Overflow