angularpdfmakevfs

error TS2540: Cannot assign to 'vfs' because it is a read-only property


Im Trying to generate PDF using pdfmaker. In my code it dosent show any errors.but when compiling it show below error. but also pdf is working and generating.

error TS2540: Cannot assign to 'vfs' because it is a read-only property.

>   19 pdfMake.vfs = pdfFonts.pdfMake.vfs;
>                ~~~
>     src/app/component/invoice/invoice.component.ts:235:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>       Types of property 'content' are incompatible.
>         Type '({ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined; style?:
> undefined; columns?: undefined; } | { text: string; fontSize: number;
> bold: boolean; ... 4 more ...; columns?: undefined; } | { ...; } | {
> ...; })[]' is not assignable to type 'Content'. 
>           Type '({ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined; style?:
> undefined; columns?: undefined; } | { text: string; fontSize: number;
> bold: boolean; ... 4 more ...; columns?: undefined; } | { ...; } | {
> ...; })[]' is not assignable to type 'ArrayOfContent'.
>             The types returned by 'pop()' are incompatible between these types.
>               Type '{ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined;
> style?: undefined; columns?: undefined; } | { text: string; fontSize:
> number; bold: boolean; ... 4 more ...; columns?: undefined; } | { ...;
> } | { ...; } | undefined' is not assignable to type 'string |
> ArrayOfContent | ContentText | ContentColumns | ContentStack |
> ContentUnorderedList | ... 11 more ... | undefined'.
>                 Type '{ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined;
> style?: undefined; columns?: undefined; }' is not assignable to type
> 'string | ArrayOfContent | ContentText | ContentColumns | ContentStack
> | ContentUnorderedList | ... 11 more ... | undefined'.
>                   Property 'tocItem' is missing in type '{ text: string; fontSize: number; alignment: string; color: string; bold?:
> undefined; decoration?: undefined; style?: undefined; columns?:
> undefined; }' but required in type 'ContentTocItem'.
>     
>     235       pdfMake.createPdf(docDefinition).download();
>                                 ~~~~~~~~~~~~~
>     
>       node_modules/@types/pdfmake/interfaces.d.ts:253:5
>         253     tocItem: boolean | string | string[];
>                 ~~~~~~~
>         'tocItem' is declared here.
>     src/app/component/invoice/invoice.component.ts:237:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>     
>     237       pdfMake.createPdf(docDefinition).print();
>                                 ~~~~~~~~~~~~~
>     src/app/component/invoice/invoice.component.ts:239:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>     
>     239       pdfMake.createPdf(docDefinition).open();

This is my component.ts code and im using generatePDf function to generate pdf and its working fine and no error showing.

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


 generatePDF(action = "open") {
    let docDefinition = {
      content: [
        {
          text: "Indika Agro Sales and Service Center",
          fontSize: 16,
          alignment: "center",
          color: "#047886",
        },
        {
          text: "INVOICE",
          fontSize: 20,
          bold: true,
          alignment: "center",
          decoration: "underline",
          color: "skyblue",
        },
        {
          text: "Customer Details",
          style: "sectionHeader",
        },
        {
          columns: [
              [
                  {
                      text: this.invoiceform.value.customerName,
                      bold: true
                  },
                  { text:this.invoiceform.value.cusPhnNumber,  }
              ],
              [
                  {
                      text: `Date: ${new Date().toLocaleString()}`,
                      alignment: 'right'
                  },
                  {
                      text: `Bill No : ${((Math.random() * 1000).toFixed(0))}`,
                      alignment: 'right'
                  }
              ]
          ]
      },
      ],
      styles: {
        sectionHeader: {
          bold: true,
          decoration: "underline",
          fontSize: 14,
          margin: [0, 15, 0, 15],
        },
      },
    };

    if (action === "download") {
      pdfMake.createPdf(docDefinition).download();
    } else if (action === "print") {
      pdfMake.createPdf(docDefinition).print();
    } else {
      pdfMake.createPdf(docDefinition).open();
    }
  }

Solution

  • If you use a typing script ...:

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