Pdfmake: Cannot read property 'Roboto-Regular.ttf' of undefined using Require js

[samimaliks]

Hi i am facing an error while managing pdfmake dependency with require js.
Error facing is "Cannot read property 'Roboto-Regular.ttf".
Any help would be appreciated. One thing more it works fine without using require js.
require.config({
paths: {

    pdfmake:'../vendor/build/pdfmake.min',
    vfs_fonts:'../vendor/build/vfs_fonts'

},
shim: {
pdfmake:{
deps:['vfs_fonts']
}
}

[devmoreno]

I am facing the same problem

[jthoenes]

You should have fonts available under pdfmake.fonts globally. Don't know how to do it in requirejs - it you figure it out, please write it up so we can include it in the documentation.

[xErik]

Had a similar problem. Reason was the wrong order of script-tags.

I do not know RequireJS. Does it always load the dependencies, the fonts, before the main script? This would probably cause the RequireJS error. Try force fonts-first loading.

My Error

Uncaught TypeError: Cannot read property 'Roboto-Regular.ttf' of undefined
VirtualFileSystem.readFileSync @ pdfmake.js:3148
TTFFont.open @ pdfmake.js:23857
PDFFont @ pdfmake.js:22010
module.exports.font @ pdfmake.js:19762

Cause of (my) error

<script src="drm-site/assets/fonts/vfs_fonts.js"></script>
<script src="drm-site/assets/libs/pdfmake.js"></script>

Fix of (my) error

<script src="drm-site/assets/libs/pdfmake.js"></script>
<script src="drm-site/assets/fonts/vfs_fonts.js"></script>

BTW: vfs_fonts seems to initialise the namespace correctly, the problem probably lies within the main script:

vfs_fonts.js:
window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs = ...

[vikitripathi]

Had the same issue while using pdfmake module in angular with ui-grid.
It happens that one has to load vfs_fonts.js after pdfmake.js , and this resolved the issue.

<script src="bower_components/pdfmake/build/pdfmake.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>

[joepal1976]

I was bitten by this too. My somewhat unorthodox solution for require.js was to treat vfs_fonts as if it was the main pdfmake file:

``` javascript:
require.config(
{
baseUrl : '.',
paths :
{
'pdfmake' : 'lib/pdfmake/build/vfs_fonts',
'pdfMakeLib' : 'lib/pdfmake/build/pdfmake'
},
shim :
{
pdfMakeLib :
{
exports: 'pdfMake'
},
pdfmake :
{
deps: ['pdfMakeLib'],
exports: 'pdfMake'
},

And then when using the lib:

``` javascript:
define(['pdfmake'],function(pdfmake) 
{
  // pdfmake is working as normal here, with fonts
}

[6trading]

Thanks @joepal1976 - that fixed it for me too!

[ksmith-karma-police]

I tried both treating vfs_fonts as if they were pdfmake, and making sure pdfmake include came before vfs_fonts include, but I am still getting an error. Note: i tried using just 'pdfmake.js' and got this same issue. Any ideas? --

TypeError: Cannot read property 'Roboto-Italic.ttf' of undefined
at r.readFileSync (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:11:18056)
at Function.t.open (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:14:9164)
at new t (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:14:2663)
at r.t.exports.font (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:14:1957)
at r.getFont (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:9:7412)
at r.widthOfString (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:9:7574)
at https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:9:25951
at Array.forEach (native)
at h (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:9:25638)
at n.buildInlines (https://localhost/ssccontent/bower_components/pdfmake/build/pdfmake.min.js:9:26484)

[hutch120]

I realise this issue is pretty old, but I had the same timing issue and got it working, so thought I'd share this info.

I combined the two files into one using notepad and saved as pdfmake.vfs_fonts.min.js, then loaded the combined library and pdfjs libraries using jQuery.

This snippet may be useful for delay loading PDF generator and viewer.

    $.when(
        $.cachedScript("/libs/pdfmake/0.1.20/pdfmake.vfs_fonts.min.js"),
        $.cachedScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.5.389/pdf.combined.min.js")
        $.Deferred(function (deferred) {
          $(deferred.resolve)
        })
      )
      .done(function () {
        cb()
      })

Note: see $.getScript for cachedScript implementation here: https://api.jquery.com/jquery.getscript/

[harryzzp]

@joepal1976 It works for me. Thank you!

[JeremyDa]

@joepal1976 It also works for me. Thank you!

[BlackPat1988]

Hello Fellas,

as you can see in the _Require.js_ documentary:

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

you can use this 3 Liner:

requirejs(['../libs/pdfmake-master/build/pdfmake.min.js'], function() {
            requirejs(['../libs/pdfmake-master/build/vfs_fonts.js']);
         });

Greez

[smcjones]

Mine (note that I use a third-party folder because that way I can declutter my packages from my third-party packages):

shim {
    // ...
    "../third-party/pdfmake/build/vfs_fonts": {
        exports: "pdfMake.vfs",
        // expects a variable path. to avoid adding a map rule or requirejs
        // failing to load, I just went one level down.
        deps: ["../build/pdfmake"] 
    }
}

Then I created my own pdfmake.js directly under lib:

define(["path/to/vfs_fonts", "path/to/pdfmake"]);

Note that the pdfmake path is optional in this file, but I like explicitly including it myself.

[liborm85]

Will be included in the new documentation. Issue: https://github.com/bpampuch/pdfmake/issues/1238

[bimmler]

Got this working by setting:

var pdfMake = require('pdfmake/build/pdfmake.js');
var font = require('pdfmake/build/vfs_fonts.js');
function testPDF() {
        var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };
        pdfMake.vfs = font.pdfMake.vfs

[hitautodestruct]

Building on @bimmler's answer I'm using vue and the es6 module import syntax, so it was as simple as:

<script>
  import pdfMake from 'pdfmake/build/pdfmake'
  import font from 'pdfmake/build/vfs_fonts'

  pdfMake.vfs = font.pdfMake.vfs

  ...
  // Use as usual
  pdfMake.createPdf(docDefinition).download();

</script>

[wal0x]

I had the same issue fix it with :

import { Component } from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({......

[ghndr]

@wal0x thank you ! the solution I needed.

[pcodedviral]

hello
can you help me if I am going to workwith npm?

[brendanwb]

@wal0x thanks, this fixed it for me in React.

[maiermic]

I switched to lazy loading and to my surprise

Promise.all([import('pdfmake/build/pdfmake.js'), import('pdfmake/build/vfs_fonts')])
  .then(([pdfMake, pdfFonts]) => {
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
    const pdfDocGenerator = pdfMake.createPdf(docDefinition);
    pdfDocGenerator.getBlob(...);
  });

did not work, but I solved it by assigning vfs directly to the PDF generator

Promise.all([import('pdfmake/build/pdfmake.js'), import('pdfmake/build/vfs_fonts')])
  .then(([pdfMake, pdfFonts]) => {
    const pdfDocGenerator = pdfMake.createPdf(docDefinition);
    pdfDocGenerator.vfs = pdfFonts.pdfMake.vfs;
    pdfDocGenerator.getBlob(...);
  });

Any idea, why pdfMake.vfs = pdfFonts.pdfMake.vfs; does not work in this case? 🤔