What is the best way to customize fonts for PDFMake in Angular projects?

Question

What is the best way to customize fonts for PDFMake in Angular projects?

Recently, I delved into the PDFMake documentation in hopes of creating a document for my Angular application. Along the way, I stumbled upon queries like this one, but unfortunately, found no answers.

I am curious if anyone can offer insight or provide a clear example on how to import custom fonts for PDFMake within an Angular project. I have downloaded the files for the "Lato" font, but I am unsure of the next steps.

As per the documentation, I did successfully import the library:

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

Additionally, I came across an example that included the following declaration:

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

This snippet provided information on naming the font, specifying its weight, and indicating the file's location, but I remain uncertain on how to instruct PDFMake to utilize this font.

Any guidance on this matter would be greatly appreciated, as I have been mulling over this for quite some time.

UPDATE: After adhering to the guidelines outlined in the documentation, I managed to implement the Lato font by directly adjusting the files within the pdfmake node_modules directory. While this approach worked, I wish to refrain from modifying node_modules as it may lead to difficulties tracking changes or accessing them on different machines while running the project.

angular typescript pdf pdf-generation pdfmake

Answer 1

Answer №1

Update for Angular Version 15

I recently upgraded my Angular project to the latest version 15, which also involved updating pdfMake from 0.1.68 to 0.2.7.

The new version makes it much simpler to upload custom fonts using a URL.

If you followed the steps below on a previous version and then upgraded pdfMake, these changes should work for you as they did for me.

In the component where you are utilizing pdfMake, the import statement used to look like this:

import pdfMake from 'pdfmake/build/pdfmake.min';
pdfMake.fonts = FONTS;

You need to switch to the default Typescript implementation:

import * as pdfMake from "pdfmake/build/pdfmake";

When calling CreatePdf, now pass in three parameters, one of which is the fonts object containing font definitions for normal, bold, italics, and bolditalics styles.

pdfMake.createPdf(docDefinition, null, FONTS);

This worked for me.

=======================================================

I have just spent time figuring out how to achieve the same. The documentation is lacking, but I managed to solve it.

To begin, you must clone the PdfMake repository locally.

https://github.com/bpampuch/pdfmake

Once downloaded, open it in your code or Sublime text editor, navigate to the examples directory within the hierarchy, and then find the fonts subdirectory.

I found the Roboto font in mine along with a sample image, but since I do not use Roboto, I deleted it.

Place all the TTF fonts you wish to use into the fonts directory. I only used one to keep the file size down.

3a) If Gulp is not installed, install it.

3b) Optionally, rename the file vfs_fonts.js in the /build directory to vfs_fonts.js.old or something similar.

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

gulp buildFonts

A new vfs_fonts.js will be generated in the pdfMake/build folder.

4a) This step is optional but may be necessary. After running the gulp command, you might need to modify the newly created vfs_fonts.js for successful compilation.

Next, copy the updated vfs_fonts.js to your project's destination where PdfMake is being used, typically under /assets/js.
Adjust the path in the import declaration within your Angular component if needed. For example: Before -
```
// import pdfFonts from 'pdfmake/build/vfs_fonts';
```
, After -
```
import pdfFonts from '../../assets/js/vfs_fonts';
```
.
Create a new font definition in pdfMake, specifying the TTF file for each style (normal, bold, italics, bolditalics).

Lastly, include your new font in the pdfDefinition within your project:

defaultStyle: {
  font: 'Baloo2'
},

There may be alternative methods to achieve this, but I hope these instructions help you get started.

Answer 2

Update for Angular Version 15

I recently upgraded my Angular project to the latest version 15, which also involved updating pdfMake from 0.1.68 to 0.2.7.

The new version makes it much simpler to upload custom fonts using a URL.

If you followed the steps below on a previous version and then upgraded pdfMake, these changes should work for you as they did for me.

In the component where you are utilizing pdfMake, the import statement used to look like this:

import pdfMake from 'pdfmake/build/pdfmake.min';
pdfMake.fonts = FONTS;

You need to switch to the default Typescript implementation:

import * as pdfMake from "pdfmake/build/pdfmake";

When calling CreatePdf, now pass in three parameters, one of which is the fonts object containing font definitions for normal, bold, italics, and bolditalics styles.

pdfMake.createPdf(docDefinition, null, FONTS);

This worked for me.

=======================================================

I have just spent time figuring out how to achieve the same. The documentation is lacking, but I managed to solve it.

To begin, you must clone the PdfMake repository locally.

https://github.com/bpampuch/pdfmake

Once downloaded, open it in your code or Sublime text editor, navigate to the examples directory within the hierarchy, and then find the fonts subdirectory.

I found the Roboto font in mine along with a sample image, but since I do not use Roboto, I deleted it.

Place all the TTF fonts you wish to use into the fonts directory. I only used one to keep the file size down.

3a) If Gulp is not installed, install it.

3b) Optionally, rename the file vfs_fonts.js in the /build directory to vfs_fonts.js.old or something similar.

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

gulp buildFonts

A new vfs_fonts.js will be generated in the pdfMake/build folder.

4a) This step is optional but may be necessary. After running the gulp command, you might need to modify the newly created vfs_fonts.js for successful compilation.

Next, copy the updated vfs_fonts.js to your project's destination where PdfMake is being used, typically under /assets/js.
Adjust the path in the import declaration within your Angular component if needed. For example: Before -
```
// import pdfFonts from 'pdfmake/build/vfs_fonts';
```
, After -
```
import pdfFonts from '../../assets/js/vfs_fonts';
```
.
Create a new font definition in pdfMake, specifying the TTF file for each style (normal, bold, italics, bolditalics).

Lastly, include your new font in the pdfDefinition within your project:

defaultStyle: {
  font: 'Baloo2'
},

There may be alternative methods to achieve this, but I hope these instructions help you get started.

Answer 3

Answer №2

An alternative method has been introduced to load fonts since version 0.1.66, which was released only 18 days after the original answer. Now, you can easily load fonts via URL and implement it in Angular like this:

pdfMake.fonts = {
    DDIN: {
        normal: `${window.location.origin}/assets/D-DIN.ttf`,
        bold: `${window.location.origin}/assets/D-DIN-Bold.ttf`,
        italics: `${window.location.origin}/assets/D-DIN-Italic.ttf`,
    }
};

Answer 4

An alternative method has been introduced to load fonts since version 0.1.66, which was released only 18 days after the original answer. Now, you can easily load fonts via URL and implement it in Angular like this:

pdfMake.fonts = {
    DDIN: {
        normal: `${window.location.origin}/assets/D-DIN.ttf`,
        bold: `${window.location.origin}/assets/D-DIN-Bold.ttf`,
        italics: `${window.location.origin}/assets/D-DIN-Italic.ttf`,
    }
};

Answer 5

Answer №3

Challenge: The default font family in pdfmake is Roboto, but I prefer to use Arial as my font.

Encountering this issue in my Angular Project led me to the following solution:

1/ Install the "pdfmake-font-generator" package globally

npm i -g pdfmake-font-generator

2/ Download the necessary font files, such as Arial, from the link below

3/ Save these files somewhere, for example in the assets/fonts folder

4/ Generate a custom font file using the installed package

pdfmakefg assets/fonts assets/custom-fonts.js

This command requires two parameters: the location of the existing font files and the desired output location and filename (the custom-fonts.js file doesn't need to exist beforehand)

5/ In your pdfmake implementation, comment out the default font import line and use your custom fonts instead

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

import pdfFonts from "./../assets/custom-fonts";

6/ Utilize your custom font by specifying it in the document definition

pdfMake.fonts = {
 'Arial' : {
   normal: 'ARIAL.TTF',
   bold: 'ARIALBD.TTF',
   italics: 'ARIALI.TTF',
   bolditalics: 'ARIALBI.TTF'
 }
}

const documentDefinition = {
 content: '',
 defaultStyle: {
  font: 'Arial'
 }
}
pdfMake.createPdf(documentDefinition).open();

Answer 6

Challenge: The default font family in pdfmake is Roboto, but I prefer to use Arial as my font.

Encountering this issue in my Angular Project led me to the following solution:

1/ Install the "pdfmake-font-generator" package globally

npm i -g pdfmake-font-generator

2/ Download the necessary font files, such as Arial, from the link below

3/ Save these files somewhere, for example in the assets/fonts folder

4/ Generate a custom font file using the installed package

pdfmakefg assets/fonts assets/custom-fonts.js

This command requires two parameters: the location of the existing font files and the desired output location and filename (the custom-fonts.js file doesn't need to exist beforehand)

5/ In your pdfmake implementation, comment out the default font import line and use your custom fonts instead

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

import pdfFonts from "./../assets/custom-fonts";

6/ Utilize your custom font by specifying it in the document definition

pdfMake.fonts = {
 'Arial' : {
   normal: 'ARIAL.TTF',
   bold: 'ARIALBD.TTF',
   italics: 'ARIALI.TTF',
   bolditalics: 'ARIALBI.TTF'
 }
}

const documentDefinition = {
 content: '',
 defaultStyle: {
  font: 'Arial'
 }
}
pdfMake.createPdf(documentDefinition).open();

Answer 7

Answer №4

Struggling with setting up Gulp on my Windows system, I decided to take a different approach that didn't involve using Gulp at all. I shared my solution in a Q&A format here: How can custom fonts be utilized in pdfmake without relying on Gulp?

This workaround was specifically tailored for Angular development.

Answer 8

Struggling with setting up Gulp on my Windows system, I decided to take a different approach that didn't involve using Gulp at all. I shared my solution in a Q&A format here: How can custom fonts be utilized in pdfmake without relying on Gulp?

This workaround was specifically tailored for Angular development.

Answer 9

Answer №5

When incorporating a typing script, make sure to follow these steps:

import * as pdfMake from 'pdf maker / create / pdfmaker';
import * as documentation from 'pdf creator / build / vfs_files';

Answer 10

When incorporating a typing script, make sure to follow these steps:

import * as pdfMake from 'pdf maker / create / pdfmaker';
import * as documentation from 'pdf creator / build / vfs_files';

Answer 11

Answer №6

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = {
  ...pdfFonts.pdfMake.vfs,
  'Custom-font-normal.ttf': 'Custom font in base64 format'
};

// include custom font in font collection for PDF generation
pdfMake.fonts = {
  CustomFont: {
    normal: 'Custom-font-normal.ttf',
  },
};

const docDefinition = {
  defaultStyle: {
    font: 'CustomFont', // replace with your custom font name
  },
  content: [...]
}

Answer 12

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = {
  ...pdfFonts.pdfMake.vfs,
  'Custom-font-normal.ttf': 'Custom font in base64 format'
};

// include custom font in font collection for PDF generation
pdfMake.fonts = {
  CustomFont: {
    normal: 'Custom-font-normal.ttf',
  },
};

const docDefinition = {
  defaultStyle: {
    font: 'CustomFont', // replace with your custom font name
  },
  content: [...]
}

Answer 13

Answer №7

If you're utilizing Webpack, this solution proved effective for me:

const fontFile = require('./fonts/Roboto-Regular.ttf');

pdfMake.fonts = {
  myFont: {
    normal: `${window.location.origin}/${fontFile}`
  }
};

const documentDefinition = { 
  defaultStyle: {
   font: 'myFont'
  }
};

pdfMake.createPdf(documentDefinition).download(`pdf_with_table_of_content.pdf`);

Answer 14

If you're utilizing Webpack, this solution proved effective for me:

const fontFile = require('./fonts/Roboto-Regular.ttf');

pdfMake.fonts = {
  myFont: {
    normal: `${window.location.origin}/${fontFile}`
  }
};

const documentDefinition = { 
  defaultStyle: {
   font: 'myFont'
  }
};

pdfMake.createPdf(documentDefinition).download(`pdf_with_table_of_content.pdf`);

Answer 15

Answer №8

In my current situation (where I am attempting to add new fonts for pdfMake) within the framework of an angular project, I am encountering the issue where pdfMake.fonts is throwing an error message stating "Cannot assign to 'fonts' because it is a read-only property.ts(2540)"...

Answer 16

In my current situation (where I am attempting to add new fonts for pdfMake) within the framework of an angular project, I am encountering the issue where pdfMake.fonts is throwing an error message stating "Cannot assign to 'fonts' because it is a read-only property.ts(2540)"...

What is the best way to customize fonts for PDFMake in Angular projects?

Answer №1

Update for Angular Version 15

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Modifying Font Style in Angular 4 Material

Setting style based on the condition of the router URL

Components loading in Angular result in lat long being undefined in google map integration

Implementing Basic Authentication for HTTP Requests in Angular 7

Using the TypeScript compiler API to determine the location in the generated code of a particular AST node

Clicking the "X" close button on a mat-list removes an item from the user interface

Failure parsing occurred when attempting to make an HTTP POST request from Angular to a PHP server

Guidelines for Organizing Angular Interface Files and Implementing Custom Type Guards

Retrieve the canvas coordinates for the images starting at lx and ending at rx on the x-axis, and

I'm experiencing issues with my Ionic application Dockerize not properly functioning in the browser

Compiling TypeScript: Using the `as` operator to convert and then destructure an array results in a compilation error, requiring an

Search for records in MySQL using Typeorm with the condition "column like %var%" to retrieve results containing the specified

Integrating Typescript into function parameters

What is the best method to adjust the width of the PrimeNG ConfirmDialog widget from a logic perspective

We are unable to create a 'Worker' as Module scripts are not yet supported on DedicatedWorkers in Angular 8

Efficiently setting up a common service constructor in Angular 2 Ionic 2 to streamline the initialization process for multiple services

What is the best way to insert a chart into a div using *ngIf in Angular?

What is the reason behind having to press the Tab button twice for it to work?

Combining Multiple TypeScript Declaration Files into an NPM Package for Seamless Importing with index.d.ts

Surprising Media Component Found in URL Parameters within the design