如何将图像与 pdfmake 对齐？答案

【问题标题】：How do I align an image with pdfmake?如何将图像与 pdfmake 对齐？
【发布时间】：2016-01-21 23:40:48
【问题描述】：

我正在使用 pdfmake 创建 PDF，并已成功使用数据 URI 嵌入图像。这是一个小图像，大约 200 像素宽，我想让它右对齐。有什么方法可以将图片推送到 PDF 的右侧？

【问题讨论】：

【解决方案1】：

您可以使用文档定义中的预定义样式来右对齐图像。 pdfmake 游乐场有一个很好的图像示例，我对其进行了编辑以在下面添加“右对齐”样式（称为“rightme”）。我尝试直接在文档定义中添加“对齐：正确”，但这不起作用。

由于长度原因，我删除了图像数据 - 请访问 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'
        }
    
    }
    
  }

【讨论】：

我本可以发誓我试过这个但它没有用，但这似乎在操场上有效，所以我一定有其他问题。感谢您的帮助！
对我也不起作用。但是 Simon 下面的解决方案对我来说适用于水平对齐。我们如何指定垂直对齐方式？

【解决方案2】：

下面的代码演示左（默认）、居中和右对齐图像。

将以下代码粘贴到http://pdfmake.org/playground.html 以进行实时查看。

Playground 要求您将文档定义分配给名为 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'
            }
        ]
    }

【讨论】：

我们怎样才能同时指定垂直对齐方式？
@fahim 看起来这里有一些垂直对齐的选项github.com/bpampuch/pdfmake/issues/74

【解决方案3】：

 $('#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
            }
        };

【讨论】：

【解决方案4】：

我在浏览器中（不是在 Nodejs 中）使用images "dictionary" 来定位来自服务器的图像，如下所示：

{
  content: [
    {
           image: 'imageKey',
           width: 20,
           height: 20
    }
  ],
  images: {
    imageKey: window.location.origin + "path/to/image" // via URL address, which can be referenced by this key
  }
}

这使您可以轻松地（重新）使用来自服务器的本地图像。我希望这对处于类似情况的人有所帮助。

【讨论】：

【解决方案5】：

只需将alignment: "center" 添加到图像中，它对我有用）

【讨论】：