pdfmake icon indicating copy to clipboard operation
pdfmake copied to clipboard

Big problem in vfs_fonts. Objects are not extensible (React + Vite)

Open PandukaNandara opened this issue 1 year ago • 1 comments

I am using React with Vite. There is a serious problem needed to be addressed related to vfs_fonts. I am unable to set the vfs_fonts according to the outdated documentation.

// Not even working in locally ❌ 
import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

// Also this is an illegal assignment. Imports are readonly  ❌  ❌ 

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

When I apply this code, I am getting the following error.

src/reports/barcode/BarcodeReport2.ts (22:13) Illegal reassignment of import "pdfMake" in "src/reports/barcode/BarcodeReport2.ts".

Then I figured out how to do this without getting an error locally.

// eslint-disable-next-line no-import-assign
Object.defineProperty(pdfMake, 'vfs', {
  value: vfs_fonts,
  writable: false, // optional, makes it read-only
});

But in the built version I am getting the following error.

Why the fuck can't you fix this yet?

It is so pathetic that developers of the plugin have managed to build one of the best pdf generator library but still not be able to implement a simple function to set the vfs_fonts like this.

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

pdfMake.setVfs(pdfFonts)

PandukaNandara avatar May 10 '24 05:05 PandukaNandara

Removing the * as syntax worked for me.

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

https://github.com/bpampuch/pdfmake/issues/1877#issuecomment-2148594824

beppo-ivel avatar Jun 04 '24 23:06 beppo-ivel

Using Vite and Typescript, I manged to fix this by:

  1. rename vfs_fonts.js to vfs_font.ts
  2. in the vfs file change content to const vfs = { 'fontName-bodl.ttf': '...', ...}; export default vfs;
  3. in the actual code import vfs with regular import and lazy import pdfmake like this:
import vfs from './vfs_fonts';

export const generatePdf = async () => {
    const { default: pdfMake } = await import('pdfmake/build/pdfmake');
    pdfMake.vfs = vfs;
    ...

Here, the default in const { default: pdfMake } was essential.

DaanH avatar Oct 12 '24 12:10 DaanH

Resolved see https://github.com/bpampuch/pdfmake/issues/2654#issuecomment-2452944236.

liborm85 avatar Nov 02 '24 10:11 liborm85