错误 TS2540：无法分配给“vfs”，因为它是只读属性

问题描述

我正在尝试使用 pdfmaker 生成 PDF。在我的代码中，它不显示任何错误。但在编译时显示以下错误。而且 pdf 也在工作和生成。

错误 TS2540：无法分配给“vfs”，因为它是只读属性。

>   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();

这是我的 component.ts 代码，我使用 generatePDf 函数生成 pdf 并且它工作正常，没有显示错误。

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,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,fontSize: 14,margin: [0,15,15],};

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

解决方法

如果您使用打字脚本...：

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

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