Comment aligner une image avec pdfmake?

Question

J'utilise pdfmake pour créer un PDF et j'ai réussi à utiliser une URI de données pour incorporer une image. C'est une petite image, d'environ 200 px, et je voudrais l'aligner à droite. Y at-il un moyen de pousser une image sur le côté droit du PDF?

Answer 1

Vous pouvez aligner à droite votre image en utilisant un style prédéfini dans votre définition de document. Le terrain de jeu pdfmake a un bon exemple d'images, que j'ai édité pour ajouter le style «aligné à droite» (appelé «rightme») ci-dessous. J'ai essayé d'ajouter directement 'alignement: droit' à la définition du document, mais cela ne fonctionne pas.

J'ai supprimé les données d'image en raison de la longueur - visiter les pdfmake playground images pour voir ce travail:

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' 
     } 

    } 

} 

Answer 2

$('#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) { 
                 return (i === 0 || i === node.table.body.length) ? 0 : 0; 
               }, 
               vLineWidth: function(i, node) { 
                 return (i === 0 || i === node.table.widths.length) ? 0 : 0; 
               }, 
               hLineColor: function(i, node) { 
                 return (i === 0 || i === node.table.body.length) ? '#276fb8' : '#276fb8'; 
               }, 
               vLineColor: function(i, node) { 
                 return (i === 0 || i === node.table.widths.length) ? '#276fb8' : '#276fb8'; 
               }, 
               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 
      } 
     };