PdfMake list of items to Repeat (checkbox next to text)

Question

I am using the pdfMake and I Ihave a text next to a image I would like to repeat that part in my docdefintion.

I would like to repeate this part of my pdfmake

{
      columns: [
        {
          image: "checked",
          height: 10,
          width: 10
        },
        {
          stack: [
            {
              columns: [
                {
                  text: 'First column first line',
                  width: '50%',
                  margin: [5, 0, 0, 0],
                }
              ]
            }
          ],
          width: '*'
        }]
    }

Here is my docDefinition

let docDefinition = {
  pageSize: 'LEGAL',
  //pageOrientation: 'landscape', //may be usefull in some case
  pageMargins: [40, 80, 40, 60],
  content: [
    {
        ...
        this.getFailureLocationObject(),
        ...
    }

         
};

pdfMake.createPdf(docDefinition).download('Intervention' + '19060023');

}

I have made this function that should return a object list (ol) I have o the object that I want to push into ol when the function retuns o there is no problem my image is displayed next to the text However when I return ol insted there is a wierd result where the image and text are no longer aligned and no mater how may objects I add to ol the result is the same there is only one image displayed next to the text. How can I fix this issues thank you for your help.

getFailureLocationObject() { const ol = [];

var o = {
  columns: [
    {
      image: "checked",
      height: 10,
      width: 10
    },
    {
      stack: [
        {
          columns: [
            {
              text: 'First column first line',
              width: '50%',
              margin: [5, 0, 0, 0],
            }
          ]
        }
      ],
      width: '*'
    }]
};

ol.push(o);
ol.push(o);

return o;

}

Here you can try what I have made so far. And see the issus I have hard coded 'First column first line','First column Second line','First column Third line'. However I would like the method this.getFailureLocationObject(), too loop and make the list.

Try it out here!

https://stackblitz.com/edit/angular-pdfmake-example-3f14km?file=src%2Fapp%2Fapp.component.ts

Answer 1

After a bit of testing with the code you provided, I figured out that the problem is the reference of the objects.

So, when pdfmake gets the values, somehow, if both have same reference (are the same object) it mixes them.

I came to this conclusion because when you change the code you have with:

getFailureLocationObject() {
    const ol = [];

    var o = {
      columns: [
        {
          image: 'checked',
          height: 10,
          width: 10,
        },
        {
          stack: [
            {
              columns: [
                {
                  text: 'First column first line',
                  width: '50%',
                  margin: [5, 0, 0, 0],
                },
              ],
            },
          ],
          width: '*',
        },
      ],
    };

    ol.push(o);

    o = JSON.parse(JSON.stringify(o));

    ol.push(o);

    return ol;
}

The error no longer occurs. Note that JSON.parse(JSON.stringify(o)) creates a new JSON object with the same content as o, meaning the two objects in the array are different (as the objects are not the same)

This might be an issue to be reported to the developers of the plugin to be fixed. For now, the solution is to add different objects to the array using clone. There is a good explaination on how and why to use cloning here.

Feel free to ask for clarification if needed!