I am using PDFmake in an Ionic 7.1 Angular 16 form Git repo here.
I have built my document definition below, according to the docs .
This is the document builder:
createPdf(){
const formValue = this.myForm.value; // get form contenst fomr html
const image = this.photoPreview ? {image: this.photoPreview, width:300} : {}; // if image taken presnet it, if not blank
let logo = {};
if (formValue.showLogo){
logo = { image: this.logoData, width: 50};
}
const docDefinition = {
// styles avalble are here http://pdfmake.org/playground.html
//watermark: {text: 'LabCPD', color: 'blue', opacity: 0.2, bold: true},
content: [
// insert columns / tables etc here
{
//alignment: 'justify',
columns: [
logo,
{
text: new Date().toTimeString(),
alignment: 'right'
}
] // end 1st columns
}, //end first obj in content array
{text: "REMINDER", style: 'header'},
{
columns: [
{
width: '50%',
text: 'From',
style: 'subheader'
},
{
width: '50%',
text: 'To',
style: 'subheader'
}
] // end second column content
}, // end secind coulmn object
{
columns: [
{
width: '50%',
text: formValue.from
},
{
width: '50%',
text: formValue.to
}
]// edn 3rd column array
}, // end 3rd col object
image , // insert image of present
{ text: formValue.text, margin: [0,20,0,20]},
], // end content
// Insert styles here
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0,15,0,0]
},
subheader: {
fontSize: 14,
bold: true,
margin : [0,15,0,0]
}
} // styles
} // docDefinition
However I get the this complier error, which I cannot track, as 'svg' property is not mentioned anywhere as a requirement in the PDFmake docs:
Argument of type '{ content: ({ image: string; width: number; } | { image?: undefined; width?: undefined; } | { columns: {}[]; text?: undefined; style?: undefined; margin?: undefined; } | { text: string; style: string; columns?: undefined; margin?: undefined; } | { ...; } | { ...; } | { ...; })[]; styles: { ...; }; }' is not assignable to parameter of type 'TDocumentDefinitions'. Types of property 'content' are incompatible. Type '({ image: string; width: number; } | { image?: undefined; width?: undefined; } | { columns: {}[]; text?: undefined; style?: undefined; margin?: undefined; } | { text: string; style: string; columns?: undefined; margin?: undefined; } | { ...; } | { ...; } | { ...; })[]' is not assignable to type 'Content'. Type '({ image: string; width: number; } | { image?: undefined; width?: undefined; } | { columns: {}[]; text?: undefined; style?: undefined; margin?: undefined; } | { text: string; style: string; columns?: undefined; margin?: undefined; } | { ...; } | { ...; } | { ...; })[]' is not assignable to type 'Content[]'. Type '{ image: string; width: number; } | { image?: undefined; width?: undefined; } | { columns: {}[]; text?: undefined; style?: undefined; margin?: undefined; } | { text: string; style: string; columns?: undefined; margin?: undefined; } | { ...; } | { ...; } | { ...; }' is not assignable to type 'Content'. Type '{ image?: undefined; width?: undefined; }' is not assignable to type 'Content'. Property 'svg' is missing in type '{ image?: undefined; width?: undefined; }' but required in type 'ContentSvg'.
170 this.pdfObj = pdfMake.createPdf(docDefinition); ~~~~~~~~~~~~~
node_modules/@types/pdfmake/interfaces.d.ts:1052:5 1052 svg: string; ~~~ 'svg' is declared here.
The compiler seems to be looking for svg property declared with the image, ive tried adding:
const image = this.photoPreview ? {image: this.photoPreview, width:300, svg: ''}: {};
Then I get error:
Type '{ image: string; width: number; svg: string; }' is not assignable to type 'Content'. Type '{ image: string; width: number; svg: string; }' is not assignable to type 'ContentSvg'. Types of property 'image' are incompatible. Type 'string' is not assignable to type 'undefined'.
The docs do not mention a ref to 'sg' property:
{
image: 'sampleImage.jpg',
width: 150,
height: 150,
},
Any input appreciated.