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;

[huandrey]

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;

thanks man! you saved my day

[carepollo]

Reading the docs, I found this and it worked for me in an angular project:

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

(<any>pdfMake).vfs = pdfFonts.pdfMake.vfs;

https://pdfmake.github.io/docs/0.1/getting-started/client-side/

[mrHaugen]

Using @sveltejs/kit@1.0.0-next.193 I got this to work if I alter the import order like this:

import * as pdfFonts from "pdfmake/build/vfs_fonts.js"; // <-- vfs_fonts has to be imported before pdfmake
import pdfMake from 'pdfmake';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

[willdkp]

Using @sveltejs/kit@1.0.0-next.193 I got this to work if I alter the import order like this:

import * as pdfFonts from "pdfmake/build/vfs_fonts.js"; // <-- vfs_fonts has to be imported before pdfmake
import pdfMake from 'pdfmake';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Thank you! Doing this solved my build issue using vite bundler with a vue project

[PaulDotterer]

Using @sveltejs/kit@1.0.0-next.193 I got this to work if I alter the import order like this:

import * as pdfFonts from "pdfmake/build/vfs_fonts.js"; // <-- vfs_fonts has to be imported before pdfmake
import pdfMake from 'pdfmake';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Man thank you very much. Nothing inside the docs would work with sveltekit 1.0.1 except for this!

[JulianaSFreitas21]

If you are using typescript you can copy the font you have in the vfs_fonts.d.ts file and create a font folder and place the content exporting the variable. it worked for me export const pdfFonts = { "Roboto-Italic.ttf": "{...}" };

[fkrauthan]

@PaulDotterer sorry to revive but when I use this in sveltekit I get:

TypeError: Cannot read properties of undefined (reading 'vfs')
    at file:///.../.svelte-kit/output/server/entries/pages/_page.svelte.js:3648:32

did you do anything else?

[PaulDotterer]

@PaulDotterer sorry to revive but when I use this in sveltekit I get:

TypeError: Cannot read properties of undefined (reading 'vfs')

    at file:///.../.svelte-kit/output/server/entries/pages/_page.svelte.js:3648:32

did you do anything else?

@fkrauthan No worries! I ended up creating my own font file that I ship with my application as giosifelis mentioned in his post. It works flawlessly.

[nataliefrick]

I had the same problem and found this solution to work for me. The only change I did was alter the last line to the following I am using vue3 with options.

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts && pdfFonts.pdfMake ? pdfFonts.pdfMake.vfs : globalThis.pdfMake.vfs;

[xpt1x]

I had the same problem and found this solution to work for me. The only change I did was alter the last line to the following I am using vue3 with options.

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts && pdfFonts.pdfMake ? pdfFonts.pdfMake.vfs : globalThis.pdfMake.vfs;

This is the solution for me (Using vite) Thank you

[SiriSollerud]

Just wanted to add what worked for me using a React Vite TypeScript setup:

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

Source: https://stackoverflow.com/questions/69468718/using-pdfmaker-in-typescript

[davidstackio]

This is what finally worked for me using Nuxt/Vite and Typescript. Hint: I bypassed the vfs_fonts import completely.

import * as pdfMake from "pdfmake/build/pdfmake";

// PDF Fonts
const pdfFonts = {
  // download default Roboto font from cdnjs.com
  Roboto: {
    normal:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Regular.ttf",
    bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Medium.ttf",
    italics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Italic.ttf",
    bolditalics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-MediumItalic.ttf",
  },
};

// Make your doc...

// Create PDF
const mainPdf = pdfMake.createPdf(doc, null, pdfFonts);

This was inspired by the instructions in the docs here: https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/url/

Note for Nuxt users: there is probably a way to add the fonts directly to the /assets folder instead of downloading them from cdnjs.com, but I haven't figured it out.

EDIT: I tried every single other solution in this thread to no avail.

[MuhammadZeeshan03]

This is what finally worked for me using Nuxt/Vite and Typescript. Hint: I bypassed the vfs_fonts import completely.

import * as pdfMake from "pdfmake/build/pdfmake";

// PDF Fonts
const pdfFonts = {
  // download default Roboto font from cdnjs.com
  Roboto: {
    normal:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Regular.ttf",
    bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Medium.ttf",
    italics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Italic.ttf",
    bolditalics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-MediumItalic.ttf",
  },
};

// Make your doc...

// Create PDF
const mainPdf = pdfMake.createPdf(doc, null, pdfFonts);

This was inspired by the instructions in the docs here: https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/url/

Note for Nuxt users: there is probably a way to add the fonts directly to the /assets folder instead of downloading them from cdnjs.com, but I haven't figured it out.

EDIT: I tried every single other solution in this thread to no avail.

Thank you for sharing. This solution worked for me!

[rubengees]

Building onto the solution of @davidstackio, here is a version that works with self hosted fonts:

Requires the @fontsource/roboto package and works with vite 5 (both dev and build).

import pdfMake from "pdfmake"

const pdfFonts = {
  Roboto: {
    normal: new URL("@fontsource/roboto/files/roboto-latin-400-normal.woff", import.meta.url).href,
    bold: new URL("@fontsource/roboto/files/roboto-latin-700-normal.woff", import.meta.url).href,
    italics: new URL("@fontsource/roboto/files/roboto-latin-400-italic.woff", import.meta.url).href,
    bolditalics: new URL("@fontsource/roboto/files/roboto-latin-700-italic.woff", import.meta.url).href,
  },
}

const mainPdf = pdfMake.createPdf(doc, null, pdfFonts)

This probably also works with other fonts, but I haven't tested it. It is important to reference either woff or ttf, woff2 is not supported.

[kelvinmarlow]

this works for me in production mode:

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

pdfMake.fonts = {
  Roboto: {
    normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
    bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
    italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
    bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf',
  },
};

[captivlab]

this works for me in production mode:

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

pdfMake.fonts = {
  Roboto: {
    normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
    bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
    italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
    bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf',
  },
};

This is works for me, thank you

[lmdvlpr]

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;

Dude, thanks a lot! I was facing issues with PDFMake when I deploy my React App in Vercel, but you solution was perfect to resolve my problem.

[Antoboscosoft]

Hiii, I hope you feeling well, if it's good fine, i need to implement the tamil font in to pdf, how can i proceed with that i have tried something but where i am making mistake i can't find it and more that that's correct or not little way i am confusing, can you help me to get it.

[Antoboscosoft]

Yes, i asked you for the question i got it, thank you

[Srajan-Bansal]

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

pdfMake.fonts = {
  Roboto: {
    normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
    bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
    italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
    bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf',
  },
};

Thanks!!!

[beppo-ivel]

Using the following lines of code within angular 17 app throws the error below. Removing the * as syntax worked for me.

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

(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

✘ [ERROR] TS7016: Could not find a declaration file for module './vfs_fonts'. '/home/mudde/Documents/angularWorkspace/antiquetrade-shop/src/app/service/vfs_fonts.js' implicitly has an 'any' type. [plugin angular-compiler]

    src/app/service/lazy-pdf-creator.service.ts:4:26:
      4 │ import * as pdfFonts from './vfs_fonts';
        ╵                           ~~~~~~~~~~~~~

✘ [ERROR] Cannot assign to import "vfs"

    src/app/service/lazy-pdf-creator.service.ts:8:16:
      8 │         pdfMake.vfs = pdfFonts.pdfMake.vfs;
        ╵                 ~~~

  Imports are immutable in JavaScript. To modify the value of this import, you must export a setter function in the imported file (e.g. "setVfs") and then import and call that function here instead.

✘ [ERROR] Cannot assign to import "vfs"

    src/app/service/lazy-pdf-creator.service.ts:8:16:
      8 │         pdfMake.vfs = pdfFonts.pdfMake.vfs;
        ╵                 ~~~

  Imports are immutable in JavaScript. To modify the value of this import, you must export a setter function in the imported file (e.g. "setVfs") and then import and call that function here instead.

[Faheem-Siddiqi]

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.

i faced issue in vercel deployment i used the code as and it worked. (jsx) for tsx use as any

import React from 'react'; import pdfmake from "pdfmake/build/pdfmake"; (pdfMake ).fonts = { Roboto: { normal: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf", bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf", italics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf", bolditalics: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf", }, };