File 'Roboto-Regular.ttf' not found in virtual file system in Angular 6 (pdfMake)

Question

I`m getting

ERROR Error: File 'Roboto-Regular.ttf' not found in virtual file system

when trying using pdfMake in angular 6.

I did

declare module 'pdfmake/build/pdfmake.js';
declare module 'pdfmake/build/vfs_fonts.js';`

in typings.d.ts and also

"typeRoots": [
  "node_modules/@types",
  "../src/typings.d.ts"
],

in tsconfig.json.

In component where i`m using pdfmake i have

import 'pdfmake/build/vfs_fonts.js';
import * as pdfMake from 'pdfmake/build/pdfmake.js';

Seems like vfs_fonts.js loading because i added console.log to this file and it works.

Also i tryed just to add

<script src="./assets/fonts/vfs.js"></script>

But still getting the same error. Maybe someone got a solution for this?

UPD 1: Importing pdfmake.js before not solved a problem

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import 'pdfmake/build/vfs_fonts.js';

SOLUTION:

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

and

pdfMake.vfs = pdfFonts.pdfMake.vfs;

SOLVED.

Gil Epshtain · Answer 1 · 2021-12-09T17:54:51.520

Install the scripts using NPM:

npm i -S pdfmake
npm i -D @types/pdfmake

In your Angular component/ service:

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

// ...

public downloadPdf(): void
{
  const pdfData: TDocumentDefinitions = {
    content: [
      'First paragraph'
    ]
  };

  const pdfFile = pdfMake.createPdf(pdfData, null, null, pdfFonts.pdfMake.vfs);

  pdfFile.download();
}

score 3 · Accepted Answer · answered Nov 20 '19 at 12:31

3

for ts file

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

constructor(){
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
}

answered Nov 20 '19 at 12:31

Sri Darshana

262
2
5

2

I'm getting an error: `vfs` is readonly. Are you using typescript? how did you solve this? – Gil Epshtain Jun 15 '20 at 10:49
@GilEpshtain use `( pdfMake ).vfs = pdfFonts.pdfMake.vfs` – NoNam4 Aug 17 '23 at 19:04

score 1 · Answer 3 · answered Jan 04 '21 at 23:18

1

For Angular 9-10, open up angular.json add the following under both scripts sections... "./node_modules/pdfmake/build/pdfmake.min.js", "./node_modules/pdfmake/build/vfs_fonts.js"

answered Jan 04 '21 at 23:18

Jonthan Ulfeng

11
1

score 0 · Answer 4 · answered Sep 21 '22 at 10:09

I solved this problem with the steps below from : pdfMake site

I had to do this steps:

Go to package directory ./node_modules/pdfmake/
Create the examples/fonts subdirectory in your pdfmake code directory, if it doesn’t already exist.
Copy your fonts (and other files you wish to embed) into the examples/fonts subdirectory.
Run command node build-vfs.js "./examples/fonts". Or run node build-vfs.js to show help.
Include your new build/vfs_fonts.js file in your code (in the same way you include pdfmake.js or pdfmake.min.js).

File 'Roboto-Regular.ttf' not found in virtual file system in Angular 6 (pdfMake)

4 Answers4