Saltar al contenido

¿Cómo alineo una imagen con pdfmake?

Queremos mostrarte la mejor respuesta que hemos encontrado online. Deseamos que te sirva de ayuda y si quieres compartir alguna mejora hazlo con libertad.

Solución:

Puede alinear a la derecha su imagen usando un estilo predefinido en la definición de su documento. El patio de juegos de pdfmake tiene un buen ejemplo de imágenes, que edité para agregar el estilo ‘alineado a la derecha’ (llamado ‘rightme’) a continuación. Intenté simplemente agregar ‘alineación: derecha’ a la definición del documento directamente, pero esto no funciona.

Eliminé los datos de la imagen debido a la longitud. – visite las imágenes de pdfmake playground para ver cómo funciona:

  var dd = 
    content: [
      'pdfmake (since it's based on pdfkit) supports JPEG and PNG format',
      'If no width/height/fit is provided, image original size will be used',
      
        image: 'sampleImage.jpg',
      ,
      'If you specify width, image will scale proportionally',
      
        image: 'sampleImage.jpg',
        width: 150
      ,
      'If you specify both width and height - image will be stretched',
      
        image: 'sampleImage.jpg',
        width: 150,
        height: 150,
      ,
      'You can also fit the image inside a rectangle',
      
        image: 'sampleImage.jpg',
        fit: [100, 100],
        pageBreak: 'after'
      ,
    
      // Warning! Make sure to copy this definition and paste it to an
      // external text editor, as the online AceEditor has some troubles
      // with long dataUrl lines and the following image values look like
      // they're empty.
      'Images can be also provided in dataURL format...',
      
            image: **'IMAGE TRUNCATED FOR BREVITY'**,
            width: 200,
            style: 'rightme'
      ,
      'or be declared in an "images" dictionary and referenced by name',
      
        image: 'building',
        width: 200
      ,
    ],
    images: 
      building: **'IMAGE DATA TRUNCATED FOR BREVITY'**
    ,
    styles:
        rightme:
           
            alignment: 'right'
        
    
    
    
  

El siguiente código muestra la izquierda (predeterminada), el centro y la derecha justificando una imagen.

Pegue el siguiente código en http://pdfmake.org/playground.html para ver en vivo.

// playground requires you to assign document definition to a variable called dd
var dd = 
    content: [
        'left align image', ' ',
        
            image: 'sampleImage.jpg',
            width: 100,
            height: 100,
            alignment: 'left' // Default... not actually required.
        ,
        ' ', ' ', 'center align image', ' ',
        
            image: 'sampleImage.jpg',
            width: 100,
            height: 100,
            alignment: 'center'
        ,
        ' ', ' ', 'right align image', ' ',
        
            image: 'sampleImage.jpg',
            width: 100,
            height: 100,
            alignment: 'right'
        
    ]

 $('#cmd').click(function () {
         var img = document.getElementById('imgReq');
         var empImage = img.getAttribute('src');

var docDefinition =  

        pageMargins: [0, 0, 0, 0],
        content: [
               
                style: 'tableExample',
                table: 
                        headerRows: 1,
                        body: [
                                [ 
                                    image: 'building',
                                    width: 195,
                                    height: 185,
                                 ],

                        ]
                ,
                layout: 
                                                hLineWidth: function(i, node)  i === node.table.body.length) ? 0 : 0;
                                                ,
                                                vLineWidth: function(i, node) ,
                                                hLineColor: function(i, node)  i === node.table.body.length) ? '#276fb8' : '#276fb8';
                                                ,
                                                vLineColor: function(i, node) ,
                                                paddingLeft: function(i, node)  return 0; ,
                                                paddingRight: function(i, node)  return 0; ,
                                                paddingTop: function(i, node)  return 0; ,
                                                paddingBottom: function(i, node)  return 0; 
                
        
],styles:
   tableExample: 
                margin: [200, 74, 0, 0],
                //alignment: 'center'
            
          , images: 
                building: empImage
            
        ;

Reseñas y calificaciones

Si estás contento con lo expuesto, tienes el poder dejar una reseña acerca de qué le añadirías a esta noticia.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

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