2016-01-26 59 views
7

pdfmakeを使用してPDFのヘッダーサイズを増やそうとしています。ヘッダーサイズを大きくするpdfMake

現在、ページの左右にヘッダーを取得できますが、ヘッダーのスペースが限られているため、高さが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' 
    ] 
} 

答えて

9

ページの余白を追加し、2番目のパラメータ(上端)を合計ヘッダーサイズに合わせる必要があります。すべてのヘッダーコンテンツが表示されるまで値を試すことができます。

例えば

:高さ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' 
    ] 
} 
+0

これを試してみます。今日は更新されます。 – d1sciple

+0

が動作確認済みです。ありがとう。 – d1sciple

4

受け入れ答えで画像を取得する:

この場合、私は80([40、、40,60] pageMargin)を使用しこれは良いことですが、ヘッダーのコンテンツの長さが異なる場合は、特に分かち合うと他の人にはうまくいくと思うようになったので、私は考えました。

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 
    } 
    }, 

}; 
+0

はるかに良い解決策です。実際のコードはあまりにも多くのアプリケーション固有ですが。より洗練された例が望ましいだろう。 – pkExec

関連する問題