Zwiększ rozmiar nagłówka pdfMake

Question

Próbuję zwiększyć rozmiar nagłówka w pliku pdf za pomocą pdfmake.

Obecnie jestem w stanie uzyskać nagłówek po lewej i prawej stronie, co jest tym, czego chcę, ale gdy wysokość przekroczy 26, obraz znika, ponieważ jest ograniczona ilość miejsca na nagłówek.

• Margines można zmniejszyć, aby zwiększyć rozmiar, ale chcę zachować margines .
• Szukałem pdfMake github dla podobnych problemów bez powodzenia.

Jeśli trzeba przetestować coś, spróbuj kod mam tak daleko na pdfmake playground

pamiętać trzeba będzie skopiować i wkleić cały kod na „placu zabaw”, aby to działało.

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

Należy dodać stronę Margargines i dostosować drugi parametr (górny margines) do całkowitego rozmiaru nagłówka. Możesz próbować wartości, dopóki nie zobaczysz całej zawartości nagłówka.

Na przykład:

W tym przypadku, używam 80 (pageMargin: [40, , 40,60]), aby uzyskać obraz o wysokości 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

Zaakceptowanych odpowiedź bo to jest dobre, ale pomyślałem, że odkąd znalazłem jeden, który moim zdaniem może działać lepiej dla innych, zwłaszcza jeśli długość nagłówka może być różna, chciałbym się podzielić.

Tabele w formacie pdf mają fajną funkcję, w której wiersze nagłówka są powtarzane na każdej stronie tabeli. Możesz więc utworzyć tabelę, która otula cały dokument i dodać tyle wierszy nagłówków, ile chcesz, i będą one lepkie na wszystkich stronach. Oto przykład dokumentu 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 
    } 
    }, 

};