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

Question

我试图使用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();

这是我的组件。我使用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,
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();
}
}

Answer 1

如果使用输入脚本…:

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

Answer 2

我使用vfs来编译react应用程序，然后它抛出这个错误，vfs是只读属性，不能分配。对我有用的是:我复制了pdfmake/build/vfs_fonts.js到我的src目录，并改变了第一行:this.pdfMake=this.pdfMake||{};this.pdfMake.vfs={

const pdfFonts={

其余文件保持不变，然后在最后我添加了默认导出:export default pdfFonts;

然后在我想用pdfmake创建df的文件中，我做了这样的事情:

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

Answer 3

我正在使用typescript，但这里标记的解决方案不适合我，而是给了我这个错误:

无法赋值导入"vfs">

如果你看到这样的情况，可以使用以下方法:

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