javascript - How to adjust size of column with pdfmake? - Stack Overflow

admin管理员组

文章数量:1296485

I'm currently working on a PDF generation with pdfmake in client-side, and I've a question :

I would like to adjust the size of my entire Column 2 + A, B blocks, but I can't, even when I put huge values... The goal is to put Column 2 on top, and A and B just under it.
Is there something I'm doing bad ?
Here is my code (you can try in on : .html )

var dd = {
    content: [
        {
            columns: [
                {
                    text: 'Column 1',
                    style: [{bold: true, alignment: 'center'}],
                    width: 45
                },
                [
                    {
                        text: 'Column 2',
                        style: [{bold: true, alignment: 'center'}],
                        width: 200 // Nothing changes..
                    },
                    {
                        columns: [
                            {
                                text: 'A',
                                width: '*',
                                style: [{bold: true, alignment: 'center'}],
                            },
                            {
                                text: 'B',
                                width: '*',
                                style: [{bold: true, alignment: 'center'}],
                            }
                        ]
                    }
                ],
                {
                    text: 'Column 3',
                    width: '*',
                    style: [{bold: true, alignment: 'center'}],
                }
            ]
        }   
    ]
}

I'm currently working on a PDF generation with pdfmake in client-side, and I've a question :

I would like to adjust the size of my entire Column 2 + A, B blocks, but I can't, even when I put huge values... The goal is to put Column 2 on top, and A and B just under it.
Is there something I'm doing bad ?
Here is my code (you can try in on : http://pdfmake/playground.html )

var dd = {
    content: [
        {
            columns: [
                {
                    text: 'Column 1',
                    style: [{bold: true, alignment: 'center'}],
                    width: 45
                },
                [
                    {
                        text: 'Column 2',
                        style: [{bold: true, alignment: 'center'}],
                        width: 200 // Nothing changes..
                    },
                    {
                        columns: [
                            {
                                text: 'A',
                                width: '*',
                                style: [{bold: true, alignment: 'center'}],
                            },
                            {
                                text: 'B',
                                width: '*',
                                style: [{bold: true, alignment: 'center'}],
                            }
                        ]
                    }
                ],
                {
                    text: 'Column 3',
                    width: '*',
                    style: [{bold: true, alignment: 'center'}],
                }
            ]
        }   
    ]
}

• javascript
• json
• pdfmake

Share Improve this question Follow edited Dec 2, 2019 at 8:28 cocool97 asked Dec 1, 2019 at 21:04 cocool97cocool97 1,25111 gold badge1111 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

you need to use table attribute into content instead of columns. please look into pdfmake/playground.html properly you will surely get an answer. I have uploaded some content from that which is useful to you.

        {
        style: 'tableExample',
        color: '#444',
        table: {
            widths: [200, 'auto', 'auto'],
            headerRows: 2,
            // keepWithHeaderRows: 1,
            body: [
                [{text: 'Header with Colspan = 2', style: 'tableHeader', colSpan: 2, alignment: 'center'}, {}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
                [{text: 'Header 1', style: 'tableHeader', alignment: 'center'}, {text: 'Header 2', style: 'tableHeader', alignment: 'center'}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
                ['Sample value 1', 'Sample value 2', 'Sample value 3'],
                [{rowSpan: 3, text: 'rowSpan set to 3\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor'}, 'Sample value 2', 'Sample value 3'],
                ['', 'Sample value 2', 'Sample value 3'],
                ['Sample value 1', 'Sample value 2', 'Sample value 3'],
                ['Sample value 1', {colSpan: 2, rowSpan: 2, text: 'Both:\nrowSpan and colSpan\ncan be defined at the same time'}, ''],
                ['Sample value 1', '', ''],
            ]
        }
    },

{
            style: 'tableExample',
            table: {
                widths: [100, '*', 200, '*'],
                body: [
                    ['width=100', 'star-sized', 'width=200', 'star-sized'],
                    ['fixed-width cells have exactly the specified width', {text: 'nothing interesting here', italics: true, color: 'gray'}, {text: 'nothing interesting here', italics: true, color: 'gray'}, {text: 'nothing interesting here', italics: true, color: 'gray'}]
                ]
            }
        },

refer http://pdfmake/playground.html this

Don't use array as a columns child directly, put into objects stack field, then you can specify width:

columns: [
  {
    width: 45,
    text: "Column 1",
  },
  {
    width: 200,
    stack: [
      { text: "Column 2" },
      // ...
    ]
  },
  {
    width: '*',
    text: "Column 3",
  }
]

本文标签： javascriptHow to adjust size of column with pdfmakeStack Overflow