Como crear tablas en un pdf con PdfMake en Angular

Hola a todos, hoy os voy a explicar como podemos crear tablas e insertarlas en un pdf con PdfMake en Angular.

Con PdfMake, podemos crear tablas en nuestro pdf.

Si necesitas crear un pdf en Angular, recuerda revisar este post:

Como crear un PDF en Angular con PdfMake

Para crear tablas, dentro de un objeto que creamos, necesitamos poner la propiedad table y dentro de este la propiedad body ,por ejemplo:


const pdfDefinition: any = {
  content: [
    {
      table: {
        body: [
          [
            'col 1',
            'col 2',
            'col 3'
          ],
          [
            'campo 1',
            'campo 2',
            'campo 3',
          ],
          [
            'campo 4',
            'campo 5',
            'campo 6',
          ],
          [
            'campo 7',
            'campo 8',
            'campo 9',
          ]
        ]
      }
    }
  ]
}

La idea es que en el body, es un array de arrays o matriz.

El resultado es el siguiente:

También podemos meter tablas anidadas:



const pdfDefinition: any = {
  content: [
    {
      table: {
        body: [
          [
            'col 1',
            'col 2',
            'col 3'
          ],
          [
            'campo 1',
            {
              table: {
                body: [
                  ['Col1', 'Col2', 'Col3'],
                  ['1', '2', '3'],
                  ['1', '2', '3']
                ]
              },
            },
            'campo 3',
          ],
          [
            'campo 4',
            'campo 5',
            'campo 6',
          ],
          [
            'campo 7',
            {
              table: {
                body: [
                  ['Col1', 'Col2', 'Col3'],
                  ['1', '2', '3'],
                  ['1', '2', '3']
                ]
              },
            },
            'campo 9',
          ]
        ]
      }
    }
  ]
}

Este es el resultado:

También podemos indicar el tamaño de las columnas, para ello, añadimos la propiedad widths antes de la propiedad body.

Le podemos indicar de varias formas el tamaño:

  • El asterisco indica que cogerá todo el ancho posible.
  • Si se lo indicamos con un numero, será el tamaño en pixeles.
  • Con ‘auto’, se adaptará al tamaño del texto.

const pdfDefinition: any = {
  content: [
    {
      table: {
        widths: ['*', 200, 'auto'],
        body: [
          [
            'col 1',
            'col 2',
            'col 3'
          ],
          [
            'campo 1',
            'campo 2',
            'campo 3',
          ],
          [
            'campo 4',
            'campo 5',
            'campo 6',
          ],
          [
            'campo 7',
            'campo 8',
            'campo 9',
          ]
        ]
      }
    }
  ]
}

Este es el resultado:

Lo podemos hacer también con la altura de las filas:


const pdfDefinition: any = {
  content: [
    {
      table: {
        heights: [10, 20, 30],
        body: [
          [
            'col 1',
            'col 2',
            'col 3'
          ],
          [
            'campo 1',
            'campo 2',
            'campo 3',
          ],
          [
            'campo 4',
            'campo 5',
            'campo 6',
          ],
          [
            'campo 7',
            'campo 8',
            'campo 9',
          ]
        ]
      }
    }
  ]
}

Este es el resultado:

También podemos usar colspan y rowspan, eso si tened en cuenta de añadir objetos vacíos. Veamos un ejemplo:


const pdfDefinition: any = {
  content: [
    {
      table: {
        body: [
          [
            { text: 'col 1' , colSpan: 3},
            {},
            {}
          ],
          [
            { text: 'campo 1', rowSpan: 3 },
            'campo 2',
            'campo 3',
          ],
          [
            {},
            'campo 5',
            'campo 6',
          ],
          [
            {},
            'campo 8',
            'campo 9',
          ]
        ]
      }
    }
  ]
}

Importante, las propiedades son colSpan y rowSpan.

Este es el resultado:

Aquí te dejo el ejemplo para descargar.

Os dejo un video donde lo explico paso a paso:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *