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:

Os dejo un video donde lo explico paso a paso:

Aquí te dejo el ejemplo para descargar.

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

Compartir

1 comentario

  1. Andrés Pérez

    Como se pueden hacer tablas dinamicas con pdfMake Wrapper?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.