es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Exportar dos imágenes una al lado de la otra en el encabezado del PDF.

He estado utilizando este plugin para tabla de datos y exportar archivos de Excel y PDF. Mi problema surge con la exportación de archivos PDF, quiero agregar dos imágenes en el encabezado de la página uno al lado del otro, pero el único resultado que obtengo es una imagen en una fila y la otra en la siguiente línea, esta es parte de mi código:

customizar: function (doc) {

  if (doc) {
    doc.content.splice(0, 0, [{
        margen: [0, 0, 0, 0],
        alineación: 'izquierda',
        imagen: 'base64_Imagen',
        ancho: 100,
        alto: 40,
      },
      {
        margen: [0, 0, 0, 0],
        alineación: 'derecha',
        imagen: 'base64_Imagen',
        ancho: 100,
        alto: 40,
      }
    ]);

    console.log(doc);
  }
}

y este es el resultado:

Imagen

Saludos

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    El problema que el usuario está enfrentando es al agregar dos imágenes una al lado de la otra en la página del encabezado al exportar un PDF usando el complemento Datatables. Han intentado implementarlo agregando dos imágenes en un array con personalización, pero como resultado, las imágenes se colocan en líneas separadas.

    Para resolver este problema, podemos intentar usar una tabla en lugar de un array para diseñar las imágenes una al lado de la otra. Para implementar esto, podemos modificar el código de la siguiente manera:

    customize: function (doc) {
    
      if (doc) {
        var header = doc.content[0].table.body;
        header.splice(0, 0, [{
            columns: [{
                image: 'base64_Image',
                width: 100,
                height: 40,
                alignment: 'left'
              },
              {
                image: 'base64_Image',
                width: 100,
                height: 40,
                alignment: 'right'
              }
            ],
            margin: [0, 0, 0, 10],
            columnGap: 10,
            fillColor: '#f2f2f2'
          }]);
      }
    }
    

    Con esta modificación, podemos diseñar las dos imágenes una al lado de la otra usando la propiedad columns y configurar la propiedad columnGap para dejar algo de espacio entre ellas. Esto creará una tabla con una fila y dos columnas, que contendrá las imágenes alineadas a la izquierda y derecha respectivamente.

    Espero que esta solución ayude a resolver el problema.

Comments are closed.