Pdfmake: Uncaught File 'Roboto-Medium.ttf' not found in virtual file system

[RodrigoInosh]

Hi, i'm having an issue with pdfmake. I import pdfmake.min.js and vfs_fonts.js but i can't create a pdf file in my page cause it throws that error:

Uncaught File 'Roboto-Medium.ttf' not found in virtual file system

I dont understand how can i solve it. Please i need help with this.

I forgot, im using windows 7

[liborm85]

You have thus defined scripts?

  <script src='build/pdfmake.min.js'></script>
  <script src='build/vfs_fonts.js'></script>

[Seh83]

Hi RodrigoInosh,

I had the same issue. Please include the vfs_fonts.js file as well. That would resolve the issue.

--
SV

[djgupta]

Hi,
I was facing the same issue as @RodrigoInosh .
This might be helpful: https://github.com/bpampuch/pdfmake/issues/302

[XeniaSiskaki]

We have the same problem in 0.1.28 (0.1.27 works ok)

We do:

require('pdfmake/build/pdfmake.js');
require('pdfmake/build/vfs_fonts.js');

[djgupta]

Hi @XeniaSiskaki,

The vfs_fonts is dependent on pdfmake. You have to add the dependency.

302 should help.

[XeniaSiskaki]

@djgupta was it added as a dependency as of 0.1.28?

[djgupta]

@XeniaSiskaki I am not sure.
I am using 0.1.26 and I had to do this.

[XeniaSiskaki]

I believe for us the problem is that window was replaced by this in vfs_fonts.js in 0.1.28

However, I don't know why this is happening

[liborm85]

This has been changed for compatibility with the web worker (see changelog https://github.com/bpampuch/pdfmake/releases/tag/0.1.28). It should never cause problems because it is in the browser window same as this.

[liborm85]

Strange that this is empty. Which framework do you use?

[XeniaSiskaki]

Sorry, I removed my comment cause I thought it was stupid. We are using webpack and managed to fix this by shimming this to window with the webpack imports-loader like this:

require('pdfmake/build/pdfmake.js');
require('imports?this=>window!pdfmake/build/vfs_fonts.js');

Hope this can be helpful for others!

[marcusbertram]

Your solution worked for me, thanks @XeniaSiskaki!

[alexxmde-zz]

I downgraded to version 0.1.26 and it got back to work

[kevinSanchez21]

I had the same issue, in my case i was trying to load the scripts asyncronously, to avoid blocking of the DOM load.

My solution is pretty simple, just open the vfs_fonts.js file, and copy its contents to de pdfmake.min.js file.
Then import only the pdfmake.min.js. With this you are sure the imports are done correctly.

[Pragmateek]

Same issue with Browserify.
@ammulder has found a fix: https://github.com/bpampuch/pdfmake/issues/864#issuecomment-298341323
I simply do:

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

[ShehramTahir]

declare var require: any;
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

I am doing like this
but it is giving me error that "File 'Roboto-Regular.ttf' not found in virtual file system"

Upper solutions not working on my side

[alexxmde-zz]

@ShehramTahir none of these solutions worked for me, I downgraded to a version from months ago and it continued to work smoothly on my project

[Tonio31]

@XeniaSiskaki! You saved me. Thanks. it works like a charm

[rstoenescu]

var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

I think @ShehramTahir 's solution needs to be added to the documentation.

[davidyeiser]

Agree with @rstoenescu. The Getting Started section is not clear on this.

How would I update the documentation? Just send a pull request? (I've never contributed to a public repository before)

[legreco]

@XeniaSiskaki thanhs
require('imports-loader?this=>window!pdfmake/build/vfs_fonts.js');
works fine!

[devqazi]

@shehramtahir solution fixed it for me when using it in electron

[chess92]

if you are linking it thru HTML tags, make sure you link the pdfmake file first and the font file below it

[Vardkin]

@Pragmateek Thank you for sharing!

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

This helped solve my issue using Laravel 5.5 and webpack

[EvilJimJafar]

I came across this issue when dynamically importing pdfMake (because it's HUGE!).
I solved it as follows - note the (...).default wrappers around the imports...

    private async downloadPDF() {
        this.preparingPDF = true
        const pdfMake = (await import(/* webpackChunkName: "pdfMake" */ 'pdfmake/build/pdfmake.min')).default
        const pdfFonts = (await import(/* webpackChunkName: "pdfFonts" */ 'pdfmake/build/vfs_fonts')).default
        pdfMake.vfs = pdfFonts.pdfMake.vfs

        const pdfDocGenerator = pdfMake.createPdf(this.pdfDefinition)
        // ...
    }

[devpato]

Anyone knows why I'm getting this error?
error TS2304: Cannot find name 'require'.

This happened after I added the solution:

var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

But pdfMake still working fine and printing the pdf

I fixed it doing it the following:
1) install @types/node with either of the following:

• npm install --save @types/node
  2) edit your src/tsconfig.app.json file and add the following in place of the empty "types": [], which should already be there:

...
"types": [ "node" ],
"typeRoots": [ "../node_modules/@types" ]
...

https://stackoverflow.com/questions/43104114/cannot-find-name-require-after-upgrading-to-angular4

[jamesond]

Anyone using Aurelia and requireJS?
Still trying to get my fonts to load properly.
import * as pdfmake from 'pdfmake';
import pdfFonts from "pdfmake/build/vfs_fonts";
I get the File 'Roboto-Medium.ttf' not found in virtual file system
Thanks for any help, I feel like I have tried all combinations to get this to work.

[RizkiDPrast]

i use requirejs and in my case i edited vfs_fonts.js
from
/// this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {

to
/// pdfMake = pdfMake || {}; pdfMake.vfs = {
then it works
Make sure you set vfs.fonts dependency to pdfMake

[KamayaniT]

I am trying to use this plugin in my Ionic 4 project.
When I try to enter :

pdfMake.vfs = pdfFonts.pdfMake.vfs;

it gives me error for vfs saying "Cannot assign to 'vfs' because it is a constant or a read-only property". Is it not compatible with ionic4 ?
Any idea?

[ghenry22]

@KamayaniT remove the @types/pdfMake to resolve that problem. I think the types file may need to be updated.

But I still see the error about the font not being found

[naveed-ahmad]

Was facing same issue, rails + webpacker.

And solution for me was:

require('pdfmake/build/pdfmake');
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

[atulmith]

I was facing the same issue in reactjs project.
Just added this line
import pdfMake from "pdfmake/build/pdfmake";
import vfsFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = vfsFonts.pdfMake ? vfsFonts.pdfMake.vfs : pdfMake.vfs;

And now it works like wonder

[scottyh527]

I'm using react and having the below issue,

Unhandled rejection File 'data/Helvetica.afm' not found in virtual file system

I tried importing it this way

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

pdfMake.vfs = vfsFonts.pdfMake ? vfsFonts.pdfMake.vfs : pdfMake.vfs;

pdfMake.fonts = {
Courier: {
normal: 'Courier',
bold: 'Courier-Bold',
italics: 'Courier-Oblique',
bolditalics: 'Courier-BoldOblique'
},
Helvetica: {
normal: 'Helvetica',
bold: 'Helvetica-Bold',
italics: 'Helvetica-Oblique',
bolditalics: 'Helvetica-BoldOblique'
},
Times: {
normal: 'Times-Roman',
bold: 'Times-Bold',
italics: 'Times-Italic',
bolditalics: 'Times-BoldItalic'
},
Symbol: {
normal: 'Symbol'
},
ZapfDingbats: {
normal: 'ZapfDingbats'
}
};

var docDefinition = {
  pageOrientation: 'landscape',
  info: {
    title: this.formatTitle(filename, territory, 'pdf')
  },
  header: territory ? {text: territory, alignment: 'center' }: {text: filename, alignment:'center'},
  defaultStyle:{
    font:'Helvetica',
    fontSize:6,
    alignment:'center'
  },
  content: [
    {
      layout: 'lightHorizontalLines', // optional

      table: {
        // headers are automatically repeated if the table spans over multiple pages
        // you can declare how many rows should be treated as headers
        headerRows: 1,
        widths: [ ],
        body: [columns]
      }
    }
  ],
  footer: function(currentPage, pageCount) {
    if(pageCount < 2) {
      return {text: currentPage.toString() + ' of ' + pageCount , alignment:'center'}; }
    }
};

But it is still giving me an error. Any idea how I can import the helvetica that comes with it?

[ArbestNew]

For client-side use with webpack, I suggest go to this page https://pdfmake.github.io/docs/getting-started/client-side/

You can import pdfMake by:

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

let doc = {
    content: [
      'First paragraph',
      'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ]
  }
  pdfMake.createPdf(doc).download('test.pdf')

[ariunbatb]

my solution was edit vfs_fonts.js
from
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
to
pdfMake = pdfMake || {}; pdfMake.vfs = {

and removed this line

pdfMake.vfs = pdfFonts.vfs;

[kirykr]

create a new field in the project where you keep your custom JS file for example packs/vfs_fontsjs
replace this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs =
whith window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs =
and require the file from the new file instead.