PDFmake looking for 'svg' property in Image for document builder in Ionic 7 / Angular 16- compile error

43 Views Asked by At

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.

0

There are 0 best solutions below