Pdfmake: Please fix the vfs_fonts file. It does not have a default export.

[mnemanja]

import pdfFonts from "pdfmake/build/vfs_fonts";
This piece of code crashes because vfs_fonts is a file that doesn't return anything.
I am trying to implement this library, but it fails on the first step.

[liborm85]

Please read documentation, thanks.

[mnemanja]

Can you, perhaps, point to a specific part of that page? I've read through it initially, tried to install pdfmake as npm dependency and I've also tried using it as a cdn, same result.

This part of the documentation cannot work on client because vfs_fonts file doesn't return anything, thus it cannot be referenced or edited.

import pdfMake from "pdfmake/build/pdfmake";

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

If there is a different configuration of fonts for a client, it is not obvious on that documentation page.

[liborm85]

You haven't written how you work with pdfmake and in what environment, therefore only a reference to the documentation where it should be.

I still don't know what you're trying to do with pdfmake.

[mnemanja]

Hi @liborm85, I am trying to use it on the client for making pdfs.

[liborm85]

you can use:

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

or

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

or

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

or

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

it depends on your environment. All described in link to documentation in my first post.

[KillerCodeMonkey]

@liborm85 but using

import pdfFonts from "pdfmake/build/vfs_fonts";

In a TS project you get the error, that pdfmake/build/vfs_fonts has no default export ;-)

And if you check the vfs_fonts file there is no default export

[iamandreadompe]

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

[SirPhemmiey]

Both import * as pdfFonts from 'pdfmake/build/vfs_fonts' and import pdfFonts from "pdfmake/build/vfs_fonts doesn't work :(

[SirPhemmiey]

@mnemanja , @iamandreadompe , @KillerCodeMonkey any luck with this, please?

[iamandreadompe]

@SirPhemmiey following my installation:
In angular json under scripts add:

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/.htaccess"
                        ],
                        "styles": [
                            ....
                        ],
                        "scripts": [
                            ....
                            **"node_modules/pdfmake/build/pdfmake.min.js",
                            "node_modules/pdfmake/build/vfs_fonts.js",
                            "node_modules/jszip/dist/jszip.min.js",**
                                                           .....

                        ],

then i've created a service and import these files

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

inside the service there is this function (it's just an example)

makePdf(preference: any, tableBody: any, widths: any = []) {
        const documentDefinition: any = {
            pageSize: 'A4',
            pageOrientation: 'landscape',
            pageMargins: [30, 50, 30, 30],
            styles: {
                documentTitle: {
                    fontSize: 15,
                    bold: true,
                    color: 'black'
                },
                headerStyle: {
                    fontSize: 8,
                    bold: true,
                    color: 'black'
                },
                footerStyle: {
                    fontSize: 8,
                    bold: true,
                    color: 'black'
                },
                tableHeader: {
                    fontSize: 9,
                    bold: true,
                    color: 'black'
                },
            },
            defaultStyle: {
                fontSize: 9,
            },
            content: [...],

            header: (currentPage, pageCount, pageSize) => {
                return [...]
            },
            footer: (currentPage, pageCount) => {
                const today = new Date();
                const options = { year: 'numeric', month: 'long', day: 'numeric' };
                return {...}
            }
        };

        pdfMake.createPdf(documentDefinition).open();
    }

[SirPhemmiey]

Oh wow, @iamandreadompe thanks. Can i use this same set up for React Native?

[iamandreadompe]

@SirPhemmiey you are welcome,
_Can i use this same set up for React Native?_ i really don't now

[SirPhemmiey]

Okay, thanks. I've managed to get it to work in another way.

Thank you so much for your help.

[zer09]

Okay, thanks. I've managed to get it to work in another way.

Thank you so much for your help.

@SirPhemmiey can you share how you do it? your "another way". Thanks

[iamandreadompe]

@SirPhemmiey you are welcome

[SirPhemmiey]

@zer09 this is what i did

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

If you want to use custom fonts, you have to build it from source (check the repo) and then use it like this in your code

pdfmake.fonts = { fontName: { bold: "<fontItalic.tff>", italic: "<fontItalic.tff>", ... } }

[giosifelis]

Hello, @mnemanja i had the same problem and this is how i solved it.
I made my own fonts.js and export it, ie: i copied the fonts file to my structure and changed the first line from

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {...}

to this:

const pdfFonts = {...} export default pdfFonts

then where ever i used it instead of using

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

  pdfMake.vfs =  pdfFonts.pdfMake.vfs;

i used:

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

  ppdfMake.vfs = pdfFonts;