如何將圖片與pdfmake對齊？

Question

我正在使用pdfmake創建一個PDF，並已成功使用數據URI來嵌入圖像。這是一個小圖片，大約200px，我想讓它右對齊。有沒有辦法將圖像推送到PDF的右側？

Answer 1

您可以在文檔定義中使用預定義樣式對齊圖像。 pdfmake遊樂場有一個很好的圖像示例，我編輯了這個圖像以在下面添加「右對齊」樣式（稱爲'rightme'）。我試着直接在文檔定義中添加'alignment：right'，但這不起作用。

我刪除，由於長度圖像數據 - 登陸pdfmake playground圖像查看運行：

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