Estoy usando pdfMake y tengo un texto junto a una imagen que me gustaría repetir esa parte en mi definición de documento.
Me gustaría repetir esta parte de mi pdfmake
{ columns: [ { image: "checked", height: 10, width: 10 }, { stack: [ { columns: [ { text: 'First column first line', width: '50%', margin: [5, 0, 0, 0], } ] } ], width: '*' }] }Aquí está mi 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');}
Hice esta función que debería devolver una lista de objetos (ol) Tengo el objeto que quiero insertar en ol cuando la función regresa o no hay problema, mi imagen se muestra junto al texto Sin embargo, cuando regreso ol inst allí es un resultado extraño donde la imagen y el texto ya no están alineados y no importa cuántos objetos agregue a ol, el resultado es el mismo, solo se muestra una imagen junto al texto. ¿Cómo puedo solucionar este problema? Gracias por su ayuda.
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;}
Aquí puedes probar lo que he hecho hasta ahora. Y vea el problema que he codificado 'Primera columna, primera línea', 'Primera columna, Segunda línea', 'Primera columna, Tercera línea'. Sin embargo, me gustaría que el método this.getFailureLocationObject(), también haga un bucle y haga la lista.
¡Pruébalo aquí!
https://stackblitz.com/edit/angular-pdfmake-example-3f14km?file=src%2Fapp%2Fapp.component.ts
Después de probar un poco con el código que proporcionó, descubrí que el problema es la referencia de los objetos.
Entonces, cuando pdfmake obtiene los valores, de alguna manera, si ambos tienen la misma referencia (son el mismo objeto), los mezcla.
Llegué a esta conclusión porque cuando cambias el código tienes con:
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; } El error ya no ocurre. Tenga en cuenta que JSON.parse(JSON.stringify(o)) crea un nuevo objeto JSON con el mismo contenido que o , lo que significa que los dos objetos en la matriz son diferentes (ya que los objetos no son iguales)
Este podría ser un problema que se debe informar a los desarrolladores del complemento para que lo solucionen. Por ahora, la solución es agregar diferentes objetos a la matriz usando clon. Hay una buena explicación sobre cómo y por qué usar la clonación aquí .
¡No dude en pedir aclaraciones si es necesario!