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