PDFMAKE: 'Roboto-Regular.ttf' not found in virtual file system ONLY AFTER GULP

Question

I created a simple app using knockout/bootstrap/gulp that downloads a pdf using pdfMake.js. It works fine in debug mode using VS2017. After publishing and using gulp it gives this error when run: File 'Roboto-Regular.ttf' not found in virtual file system

Note: After gulp, all JS files are in one script.js file.

I tried many things, it always works when debugging, as soon as I run gulp, it gives the error.

I tried joepal1976's solution from here (what I did with the dependencies in require.config.js)

Someone suggested .pipe(uglify({ compress: { hoist_funs: false } })) which doesn't appear to help.

Included in require.config like so:

var require = {
    baseUrl: ".",
    paths: {
        "jquery":               "js-libs/jquery.min",
        "bootstrap":            "js-libs/bootstrap.min",
        "crossroads":           "js-libs/crossroads.min",
        "hasher":               "js-libs/hasher.min",
        "knockout":             "js-libs/knockout",
        "knockout-projections": "js-libs/knockout-projections.min",
        "signals":              "js-libs/signals.min",
        "text":                 "js-libs/text",
        "vfs_fonts":            "js-libs/vfs_fonts",
        "pdfMake":              "js-libs/pdfmake.min"
    },
    shim: {
        "bootstrap": { deps: ["jquery"] },
        'pdfMake':
        {
            exports: 'vfs_fonts'
        },
        'vfs_fonts':
        {
            deps: ['pdfMake'],
            exports: 'vfs_fonts'
        }
    }
};

JS for the page:

define(["knockout", "text!./home.html"], function (ko, homeTemplate) {
function HomeViewModel(route) {
    var thisVM = this;


    this.VMInit = function () {

        var thePDF = {
            content: [
                'My test invoice.',
            ]
        };

        pdfMake.createPdf(thePDF).download('pdf_test.pdf');

    }

    thisVM.VMInit();
}
return { viewModel: HomeViewModel, template: homeTemplate };

});

The Gulp file:

//-----------------------------------------------------------------------
// Node modules
var fs      = require('fs'),
vm      = require('vm'),
merge   = require('deeply'),
chalk   = require('chalk'),
es      = require('event-stream');

//-----------------------------------------------------------------------
// Gulp and plugins
var gulp        = require('gulp'),
rjs         = require('gulp-requirejs-bundler'),
concat      = require('gulp-concat'),
clean       = require('gulp-clean'),
replace     = require('gulp-replace'),
uglify      = require('gulp-uglify'),
htmlreplace = require('gulp-html-replace');

// Config
var requireJsRuntimeConfig = 
vm.runInNewContext(fs.readFileSync('src/app/require.config.js') + '; require;');
requireJsOptimizerConfig = merge(requireJsRuntimeConfig, {
    out: 'scripts.js',
    baseUrl: './src',
    name: 'app/startup',
    paths: {
        requireLib: 'js-libs/require'
    },
    include: [
        'requireLib',
        'components/nav-bar/nav-bar',
        'components/home-page/home',
        'text!components/about-page/about.html'
    ],
    insertRequire: ['app/startup'],
    bundles: {
        // If you want parts of the site to load on demand, remove them from the 'include' list
        // above, and group them into bundles here.
        // 'bundle-name': [ 'some/module', 'another/module' ],
        // 'another-bundle-name': [ 'yet-another-module' ]
    }
});

//-----------------------------------------------------------------------
// Discovers all AMD dependencies, concatenates together all required .js 
files, minifies them
gulp.task('js', function () {
    return rjs(requireJsOptimizerConfig)
        .pipe(replace('Views/src/', ''))
        .pipe(replace('img/', 'Assets/img/'))
        .pipe(replace('css/', 'Assets/css/'))
        .pipe(uglify({
            preserveComments: 'some'
        }))
        .pipe(gulp.dest('./dist-app/Assets/js/'));
});


gulp.task('css', function () {
return gulp.src(['./src/css/bootstrap.css',
                 './src/css/bootstrap-switch.css',
                 './src/css/dataTables.bootstrap.css',
                 './src/css/dataTables.colVis.css',
                 './src/css/dataTables.responsive.css',
                 './src/css/daterangePicker.css'])
    .pipe(concat('styles.css'))
    .pipe(gulp.dest('./dist-app/Assets/css/'));
});


// Copies index.html, replacing <script> and <link> tags to reference production 
URLs
gulp.task('html', function () {
return gulp.src('./src/index.html')
    .pipe(htmlreplace({
        dependencies_top: '<link href="Assets/css/styles.css" 
rel="stylesheet">',
        dependencies_bottom: '<script src="Assets/js/scripts.js"></script>'
    }))
    .pipe(gulp.dest('./dist-app/'));
});



// Removes all files from ./dist/
gulp.task('clean', function () {
console.log("the clean task");
return gulp.src('./dist-app/**/*', { read: false })
    .pipe(clean());
});

// All tasks in [] must complete before 'default' can begin
gulp.task('default', ['html', 'js', 'css'], function (callback) {
callback();
console.log('\nPlaced optimized files in ' + chalk.magenta('dist-app/\n'));
});

The Startup.js file if its helpful:

define(['jquery',
    'knockout',
    './router',
    'bootstrap',
    'knockout-projections',
    'pdfMake',
    'vfs_fonts'], function ($, ko, router) {

// Components can be packaged as AMD modules, such as the following:
ko.components.register('nav-bar', { require: 'components/nav-bar/nav-bar' });
ko.components.register('home-page', { require: 'components/home-page/home' 
});

// ... or for template-only components, you can just point to a .html file 
directly:
ko.components.register('about-page', {
template: { require: 'text!components/about-page/about.html' }
});

ko.components.register('new-page', { require: 'components/new-page/new-page' 
});

// [Scaffolded component registrations will be inserted here. To retain this 
//feature, don't remove this comment.]

// Start the application
ko.applyBindings({ route: router.currentRoute });
});

Answer 1

Following code worked for me:

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

Answer 2

I battled with this recently on stackblitz when using it with angular. the issue was pdfmake.vfs on the window object was not being set. so i had to manually set it in the constructor of my pdf service like so.

  constructor() {
    (window as any).pdfMake.vfs = pdfFonts.pdfMake.vfs;
  }

Answer 3

I came across this issue and resolved it by including vfs_fonts.js just after the pdfmake Javascript file.

Here is my code, you should just need to set the file path to wherever your copy of the file is placed.

<script src="~/Content/DataTables/pdfmake-0.1.32/pdfmake.min.js"></script>
<script src="~/Content/DataTables/pdfmake-0.1.32/vfs_fonts.js"></script>

CDN LINK

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>

please follow the hierarchy/dependency of links else it won't work