Question

无论我尝试什么，我都无法在第二列内部对齐表格。

var docDefinition = {
    content: [
        {
            columns: [
                {   text: 'Column 1',
                },
                [
                    {
                        text: 'Column 2',
                        alignment: 'right' // WORKS
                    },
                    {
                        alignment: 'right', // NO EFFECT
                        table: {
                            alignment: 'right', // NO EFFECT
                            body: [
                                ['Date', '07/21/2017' ],
                                ['Representative', 'Test' ]
                            ]
                        }
                    }
                ]
            ]
        }
    ]
};

pdfMake.createPdf(docDefinition).download();

https://jsfiddle.net/8kqnrduw/

我正在寻找任何可能的解决方法。

请帮忙

预期结果：

Answer 1

您如何看待这个想法？

   {
      alignment: 'right',
      columns: [
        {
           stack: [
              { table: {....}}
           ]
        }
      ]
    }

Answer 2

您的问题与对齐有关，它与嵌套列和列宽有关。 pdfmake中的对齐用于对齐文本，就像您使用text: 'Column 2'的对齐和表格单元格内的每个文本的对齐一样。

在您的情况下，您创建了两列，每列为'*'星形宽度（填充剩余宽度），这是默认列宽。因此，text: 'Column 1'下面有text: 'Column 2'和50％宽度列的50％宽度列，text: 'Column 2'下有一个表格（不完全符合您的要求）。

所以，你应该做的是你需要在第二列text: 'Column 2'下面的部分内创建一个嵌套的列结构，该列已经是页面的一半宽度。这个嵌套的列结构将涉及两列;一个用于表格，宽度与表格内的元素一样宽，另一个列为空白内容，只是为了让桌子远离正确的位置。

预期结果的工作代码如下。您还可以看到screenshot here for the code and its output at the pfdmake playground。

var docDefinition = {
    content: [
        {
            columns: [
                {   
                    text: 'Column 1',
                },
                [
                    {
                        text: 'Column 2',
                        alignment: 'right' // Aligns 'Column 2' text to right
                    },
                    {
                        columns: [
                            {
                                text:'',
                                width: '*'
                            },
                            {
                                table: {
                                    body: [
                                        ['Date', '07/21/2017' ],
                                        ['Representative', 'Test' ]
                                    ]
                                }, 
                                alignment: 'right', // Optional, for body texts
                                width: 'auto' // Changes width of the table
                            }
                        ]
                    }
                ]
            ]
        }
    ]
}

Answer 3

尝试这样做：

body: [
       [{text: 'Date', alignment: 'right'},  {text: '07/21/2017', alignment: 'right'}],
       [{text: 'Representative', alignment: 'right'}, {text: 'Test', alignment: 'right'}]
      ]

pdfmake：对齐列中的表格

3 个答案: