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.
I've recently updated my Angular to the latest 15 verion. In doing so I upgraded pdfMake to 0.2.7 from 0.1.68.
Its way easier to upload your custom fonts via a URL now.
If you followed the instructions below on a previus version and upgraded pdfMake, these changes worked for me.
In the component where you are using pdfMake. the import declaration did look like this:
import pdfMake from 'pdfmake/build/pdfmake.min';
pdfMake.fonts = FONTS;
Change to the default TS implementation.
import * as pdfMake from "pdfmake/build/pdfmake";
CreatePdf now takes three parameters, one being fonts. Here I insert a reference to a constaint defining our font in normal, bold, italics and bolditalics.
pdfMake.createPdf(docDefinition, null, FONTS);
It works for me.
=======================================================
have just spent an afternoon trying to do the same. The documentation is at minimum, but I have figured it out.
https://github.com/bpampuch/pdfmake
Mine had the Roboto font and a sample picture within it. I'm not using Roboto so I deleted it.
3a) Install Gulp (if its not installed)
3b) Optionally rename
vfs_fonts.js
in the /build directory to "vfs_fonts.js.old" or something.
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; }
Next I copied the new vfs_fonts.js to my project where I am using PdfMake and copied the file into /assets/js
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';
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
defaultStyle: {
font: 'Baloo2'
},
I suspect there are better ways to do this, but I hope this gets you going.