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

Answer 3

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

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

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

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

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

如何将图像与pdfmake对齐？

4 个答案: