How to import custom fonts for PDFMake in Angular application?

问题

I just started reading into PDFMake's documentation to build a document in my Angular app, I've come across some questions like this one but never got an answer.

I was wondering if someone knows or could provide a readable example of how to import custom fonts for PDFMake in an Angular application, I've downloaded the files for the "Lato" font, but I have no clue on where to proceed now.

I did import the library as shown on the documentation:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

I also saw an example where an additional declaration was made like this:

pdfMake.fonts = {
  Lato: {
    normal: 'assets/fonts/Lato-Regular.ttf'
  }
};

Which of course tells me to just define a name for the font, the weight of it, and point to the location of the file for that specific font; but after that I don't know how to actually tell PDFMake to use that font.

Any help is appreciated, I have been trying to find solutions for this for a while.

EDIT: Following the docs, I was able to use the Lato font, by directly modifying the files found in the pdfmake node_modules directory, it works, but I'd like to avoid making changes to node_modules since I wouldn't be able to keep track of those changes or have them available when running the project on a different machine.

回答1:

have just spent an afternoon trying to do the same. The documentation is at minimum, but I have figured it out.

1) First you need to clone the PdfMake repo locally.

https://github.com/bpampuch/pdfmake

2) Once downloaded open it up in code or sublime and located in the hierarchy find the examples directory and then the fonts sub directory.

Mine had the Roboto font and a sample picture within it. I'm not using Roboto so I deleted it.

3) Copy into the fonts directory all the TTF fonts you want to use. Actually I was only using one, to keep the file size down.

3a) Install Gulp (if its not installed)

3b) Optionally rename

vfs_fonts.js

in the /build directory to "vfs_fonts.js.old" or something.

4) Run the following gulp command from your Terminal or Powershell...

gulp buildFonts

a new vfs_fonts.js will appear in the pdfMake/build folder.

4a) This step is optional but I needed to edit the newly created vfs_fonts.js as it didn't compile. Look at the old saved file and the new one side by side and you will see. I replaced:

var vfs = {

with the existing file declaration:

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {

and removed the last line starting...

if (typeof this.pdfMake !== 'undefined' && typeof this.pdfMake.addVirtualFileSystem !== 'undefined') { this.pdfMake.addVirtualFileSystem(vfs); } if (typeof module !== 'undefined') { module.exports = vfs; }

5) Next I copied the new vfs_fonts.js to my project where I am using PdfMake and copied the file into /assets/js

6) next change the path to the import declaration in my angular component (you should already have this):

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

import pdfFonts from '../../assets/js/vfs_fonts';

7) Create a new font in pdfMake. I only have one so all styles are referencing the same TTF

pdfMake.fonts = {
  Baloo2: {
    normal: 'Baloo2-Regular.ttf',
    bold: 'Baloo2-Regular.ttf',
    italics: 'Baloo2-Regular.ttf',
    bolditalics: 'Baloo2-Regular.ttf'
  }
}

and 8) include your new font in your pdfDefinition