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

2 comentarios

  1. Andrés Pérez

    Como se pueden hacer tablas dinamicas con pdfMake Wrapper?

  2. Samuel Aguilera

    Hola Andrés

    Te dio respuesta a tu pregunta? Lo que pasa es que también tengo el mismo detalle con generar una tabla dinámica

Deja una respuesta

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