Incorporating pdfMake into my project, I am trying to display text next to an image and replicate this section in my docDefinition. The issue arises when I attempt to repeat this part using the following code snippet:
{
columns: [
{
image: "checked",
height: 10,
width: 10
},
{
stack: [
{
columns: [
{
text: 'First column first line',
width: '50%',
margin: [5, 0, 0, 0],
}
]
}
],
width: '*'
}]
}
Within my docDefinition:
let docDefinition = {
pageSize: 'LEGAL',
pageMargins: [40, 80, 40, 60],
content: [
{
...
this.getFailureLocationObject(),
...
}
};
pdfMake.createPdf(docDefinition).download('Intervention' + '19060023');
However, when attempting to populate an object list (ol) with similar image-text combinations using the function getFailureLocationObject(), alignment issues arise. Despite adding multiple objects to ol, only one image is displayed next to the text. How can I rectify this issue?
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;
}
To see the issue and test the current setup, I have hard coded "First column first line", "First column Second line", "First column Third line". However, I aim for the method this.getFailureLocationObject() to iterate and create the list dynamically.
Experiment with it here!
https://stackblitz.com/edit/angular-pdfmake-example-3f14km?file=src%2Fapp%2Fapp.component.ts