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

4 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

  3. Edward

    tengo duda de como darle estilos a las tablas

  4. Lucas Gallardo

    Este mensaje es para Andres perez y Samuel Aguilera.
    Con respecto a su pregunta sobre como hacer una tabla dinamica, se puede hacer con pdfMake (pdfMake-wrapper). En mi caso particular tuve que hacer una tabla cuya columnas debían ser dinamicas (Headers) y el body (rows) debian adecuarse al nro de columnas. Para lograr esto cree un metodo que me devuelva un array con las columnas que necesitaba. Aqui les dejo el codigo principal de la creacion de la tabla:

    private crearTablaProductos(data: Producto[], lista: any[]): ITable {
    return new Table([
    this.crearHeader(lista), // se llama al metodo para crear el header de columnas y devuelve un array donde cada elemento es una columna
    …this.extractProductos(data,) // metodo donde devuelve un array que contiene la misma cantidad de elementos que las columas ( si las columas son 5…..el array debe tener 5 elementos). a tener en cuenta que hago uso de (…) para la destructuracion de lo que devuelve el metodo
    ]).end
    }
    private crearHeader(lista: any[]): any[]{
    let arrayheader = [‘Producto’,’Marca’,’Costo’]; //columnas estaticas
    lista.forEach(item=> arrayheader.push(`${item.lista}`)); // columnas dinamicas => que salen del array lista

    return arrayheader
    }
    private extractProductosRubro(productos: Producto[]): any[] {
    let arrayProductos = [];
    let arrayProducto = [];
    productos.forEach((prod: Producto) =>
    {
    arrayProducto.push(prod.nombre,prod.preciocompra,prod.precioventa); // tener en cuenta la cantidad de columnas del header de la tabla
    arrayProductos.push(arrayProducto);
    arrayProducto = [];
    })
    return arrayProductos.map(prodArray => prodArray);
    }

    Espero que les sirva la ayuda.
    Saludos!!!!

Deja una respuesta

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