How to create a PDF on Node.js using PDFMake and vfs_fonts?

Question

It looks like this question has been asked quite a few times with older versions of PDFMake, but hasn't been updated with what appears to be the latest directory structure. Plus, copying fonts into a root "fonts" folder isn't great.

How in the world do I get a server side version of PDFMake ("pdfmake": "^0.1.31") running on Node.js with the included vfs_fonts.js file?

Install using npm on command line

npm install pdfmake fs --save

Boot up a Node.js app index.js with the following:

var fonts = {
    Roboto: {
        normal: 'fonts/Roboto-Regular.ttf',
        bold: 'fonts/Roboto-Medium.ttf',
        italics: 'fonts/Roboto-Italic.ttf',
        bolditalics: 'fonts/Roboto-MediumItalic.ttf'
    }
};

var PdfPrinter = require('pdfmake/src/printer');
var printer = new PdfPrinter(fonts);

var dd = {
    content: [
        'First paragraph',
        'Another paragraph'
    ]
}
var pdfDoc = printer.createPdfKitDocument(dd);
pdfDoc.pipe(fs.createWriteStream('basics.pdf')).on('finish',function(){
    //success
});
pdfDoc.end();

Hit run and bam:

/usr/local/bin/node index.js
fs.js:640
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^
Error: ENOENT: no such file or directory, open 'fonts/Roboto-Regular.ttf'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)

The problem seems to lie with the location of the fonts/Roboto... files. Client-side, this is solved by including the vfs_fonts.js file. Server-side, I'm not sure. There are NO fonts folder or .ttf files included. The meteor framework example I've found doesn't seem applicable.

Any ideas? All the official examples reference a src/fonts folder. Not a good way to go for an npm install server module.

Answer 1

This is what I did to resolve this.

Downloaded "roboto-font": "0.1.0" module and assign path of that fonts in Roboto object and it worked fine.

let fonts = {
    Roboto: {
        normal: 'node_modules/roboto-font/fonts/Roboto/roboto-regular-webfont.ttf',
        bold: 'node_modules/roboto-font/fonts/Roboto/roboto-bold-webfont.ttf',
        italics: 'node_modules/roboto-font/fonts/Roboto/roboto-italic-webfont.ttf',
        bolditalics: 'node_modules/roboto-font/fonts/Roboto/roboto-bolditalic-webfont.ttf'
    }
};
let printer = new pdfMake(fonts);
let pdfDoc = printer.createPdfKitDocument(pdfData);
pdfDoc.pipe(fs.createWriteStream(reportName));
pdfDoc.end();

Answer 2

You need to download first the Roboto font here https://fonts.google.com/specimen/Roboto and copy them inside you fonts folder. Update your fonts object like this:

var fonts = {
  Roboto: {
    normal: path.join(__dirname, '..', 'your_public_folder', '/fonts/Roboto-Regular.ttf'),
    bold: path.join(__dirname, '..', 'your_public_folder', '/fonts/Roboto-Medium.ttf'),
    italics: path.join(__dirname, '..', 'your_public_folder', '/fonts/Roboto-Italic.ttf'),
    bolditalics: path.join(__dirname, '..', 'your_public_folder', '/fonts/Roboto-MediumItalic.ttf')
  }
}

In this example, replace the 'your_public_folder' with folder name where you have all your html, css and js files.