增加 header 大小 pdfMake

Question

我正在尝试使用 pdfmake 增加 pdf 的 header 大小。

目前我可以在页面的左右两侧得到一个header，这是我想要的，但是当高度超过26时，图像消失了，因为[的数量有限=32=] 为 header。

可以减少边距以增加尺寸，但我想要余量。
我在 pdfMake github 中搜索了类似的问题，但没有成功。

如果您需要测试任何东西，请尝试我目前拥有的代码 pdfmake playground

请记住，您需要将所有这些代码复制并粘贴到 "playground" 上才能使其正常工作。

var dd = {
  pageSize: 'LEGAL',
  pageOrientation: 'landscape',
  header: {
    margin: 8,
    columns: [{
      table: {
        widths: ['50%', '50%'],
        body: [
          [{
            image: 'sampleImage.jpg',
            width: 80,
            height: 26,
          }, {
            image: 'sampleImage.jpg',
            width: 80,
            height: 26,
            alignment: 'right'
          }]
        ]
      },
      layout: 'noBorders'
    }]
  },
  content: [
    'First paragraph',
    'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
  ]
}

Answer 1

您需要添加 pageMargins 并将第二个参数（上边距）调整为总 header 大小。您可以尝试各种值，直到所有 header 内容都可见。

例如：

在这种情况下，我使用 80 (pageMargin: [40,80,40,60]) 来获取高度为 60

的图像

var dd = {

    pageSize: 'LEGAL',
    pageOrientation: 'landscape',
    pageMargins: [40, 80, 40, 60],

    header: {
        margin: 8,
        columns: [
            {
                table: {
                    widths: [ '50%','50%'],

                    body: [
                        [
                            { image: 'sampleImage.jpg',

                                width: 80, height: 60,

                            },

                            { image: 'sampleImage.jpg',

                                width: 80, height: 60,
                                alignment:'right'}
                        ]
                    ]
                },
                layout: 'noBorders'
            }

        ]
    },

    content: [
        'First paragraph',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ]
}

Answer 2

对此公认的答案是一个很好的答案，但我认为既然我找到了一个我认为可能对其他人更有效的答案，特别是如果 header 内容长度可能会有所不同，我会分享。

pdfmake 中的表格有一个漂亮的功能，其中 header 行在 table 跨度的每一页上重复。因此，您可以创建一个 table 来包裹整个文档，并根据需要添加任意多的 header 行，它们将粘在所有页面上。这是一个示例 doc def。

var docDefinition = {

  pageSize : 'LETTER',
  pageMargins : [25, 25, 25, 35],

  defaultStyle : {
    fontSize  : 12,
    columnGap : 20
  },

  // Page Layout

  content : {

    // This table will contain ALL content
    table : {
      // Defining the top 2 rows as the "sticky" header rows
      headerRows: 2,
      // One column, full width
      widths: ['*'],
      body: [


        // Header Row One
        // An array with just one "cell"
        [
          // Just because I only have one cell, doesn't mean I can't have
          // multiple columns!
          {
            columns : [
              {
                width    : '*',
                text     : 'Delivery Company, Inc.',
                fontSize : 12,
                bold     : true
              },
              {
                width     : '*',
                text      : [
                  { text: 'Delivery Slip\n', fontSize: 12 },
                  { text: 'Date ', bold: true },
                  '2/16/2015   ',
                  { text: 'Arrived ', bold: true },
                  '11:05 AM   ',
                  { text: 'Left ', bold: true },
                  '11:21 AM'
                ],
                fontSize  : 10,
                alignment : 'right'
              }
            ]
          }
        ],


        // Second Header Row

        [
          {
            columns: [
              {
                width: 'auto',
                margin: [0,0,10,0],
                text: [
                  { text: 'CUSTOMER\n', fontSize: 8, bold: true, color: '#bbbbbb' },
                  { text: 'John Doe', fontSize: 12 }
                ]
              },
              {
                width: 'auto',
                margin: [0,0,10,0],
                text: [
                  { text: 'INVOICE #\n', fontSize: 8, bold: true, color: '#bbbbbb' },
                  { text: '123456', fontSize: 12 }
                ]
              }
            ]
          }
        ],

        // Now you can break your content out into the remaining rows.
        // Or you could have one row with one cell that contains
        // all of your content

        // Content Row(s)

        [{
          fontSize: 10,
          stack: [

            // Content

            { text:'this is content', pageBreak: 'after' },
            { text:'this is more content', pageBreak: 'after' },
            { text:'this is third page content' }
          ]
        }],

        [{
          fontSize: 10,
          stack: [

            // Content

            { text:'this is content', pageBreak: 'after' },
            { text:'this is more content', pageBreak: 'after' },
            { text:'this is third page content' }
          ]
        }]


      ]
    },


    // Table Styles

    layout: {
      hLineWidth: function(i, node) { return (i === 1 || i === 2) ? 1 : 0; },
      vLineWidth: function(i, node) { return 0; },
      hLineColor: function(i, node) { return (i === 1 || i === 2) ? '#eeeeee' : 'white'; },
      vLineColor: function(i, node) { return 'white' },
      paddingBottom: function(i, node) {
        switch (i) {
          case 0:
            return 5;
          case 1:
            return 2;
          default:
            return 0;
        }
      },
      paddingTop: function(i, node) {
        switch (i) {
          case 0:
            return 0;
          case 1:
            return 2;
          default:
            return 10;
        }
      }
    }
  },


  // Page Footer

  footer : function(currentPage, pageCount) {
    return {
      alignment : 'center',
      text      : currentPage.toString() + ' of ' + pageCount,
      fontSize  : 8
    }
  },

};

增加 header 大小 pdfMake

Increase header size pdfMake

javascript

pdfmake