Use pdfmake library in SPFx v1.18.2 projects

For my current customer project I needed to implement a SPFx based WebPart solution to fetch information from Office 365 via Graph API and to summarize the information in a PDF document. The customer does not want to have any server side code (e. g. serverless  AZURE function). This means I had to create the PDF on the client. For that purpose I used the library pdfmake in my SPFx React based App. To use the library in a SPFx project you should consider the bottom implementation to prevent errors like the following two possible pitfalls:

• Roboto-Regular (or any other) font not found in virtual file system
• Argument of type '{ pageSize: string; header: string; content: ({ text: string; style: string; table?: undefined; layout?: undefined; } | { style: string; table: { widths: any[]; headerRows: number; body: any[]; }; layout: { fillColor: (rowIndex: number) => string; }; text?: undefined; })[]; styles: { ...; }; }' is not assignable to parameter of type 'TDocumentDefinitions'. Types of property 'content' are incompatible.

import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from "pdfmake/build/vfs_fonts";
import { TDocumentDefinitions } from "pdfmake/interfaces";
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

const data : TDocumentDefinitions = {
  Configuration for PDF content here ...
  For more information see: pdfmake playground
}

With the above code lines it is possible to create pdf-docments with the library without any errors.

Happy coding 😊