代码之家  ›  专栏  ›  技术社区  ›  sqrepants

增加页眉大小pdfMake

  •  20
  • sqrepants  · 技术社区  · 9 年前

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

    目前,我能够在页面的左右两侧都获得标题,这是我想要的,但当高度超过26时,图像会消失,因为标题的空间有限。

    • 边距可以减小以增大尺寸,但我希望 余量。
    • 我在pdfMake github上搜索过类似的问题,但没有成功。

    如果您需要测试任何东西,请尝试我目前为止编写的代码 pdfmake 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'
      ]
    }
    
    2 回复  |  直到 9 年前
        1
  •  32
  •   Ramon-san    9 年前

    您需要添加pageMargins并将第二个参数(上边距)调整为总页眉大小。您可以尝试值,直到看到所有标题内容。

    例如:

    在这种情况下,我使用80(页边距:[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'
        ]
    }
    
        2
  •  13
  •   Eric    8 年前

    对于这个问题,公认的答案是好的,但我想,既然我找到了一个我相信对其他人来说可能更好的答案,尤其是如果标题内容长度可能不同,我会分享。

    pdfmake中的表格有一个很好的特性,在表格跨越的每一页上都重复标题行。因此,您可以创建一个表格来包装整个文档,并添加任意多的标题行,这样它们在所有页面上都会很粘。这是一个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
        }
      },
    
    };