如何将图片与pdfmake对齐？

Question

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

Answer 1

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

将以下代码粘贴到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 2

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

由于长度原因，我删除了图像数据 -请访问pdfmake游乐场图像以查看其工作原理：

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

    }

}