2016-01-26 8 views
7

मैं पीडीएफकेक का उपयोग कर पीडीएफ पर हेडर आकार बढ़ाने की कोशिश कर रहा हूं।हेडर आकार बढ़ाएं pdfMake

वर्तमान में पृष्ठ के बाएं और दाएं दोनों पर एक शीर्षलेख प्राप्त करने में सक्षम है, जो मैं चाहता हूं, लेकिन जब ऊंचाई 26 गुजरती है, तो छवि गायब हो जाती है क्योंकि शीर्षलेख के लिए सीमित मात्रा में स्थान होता है।

  • आकार बढ़ाने के लिए मार्जिन में कमी आ सकती है लेकिन मुझे मार्जिन रहने के लिए चाहिए।
  • मैंने पीडीएफमेक जीथ्यूब को बिना किसी सफलता के समान मुद्दों के लिए खोजा है।

आप कुछ भी परीक्षण करने के लिए की जरूरत है, कोड मैं अब तक 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

आपको एक पृष्ठ मार्जिन जोड़ने और अपने शीर्ष शीर्षलेख आकार में दूसरे पैरामीटर (शीर्ष मार्जिन) को समायोजित करने की आवश्यकता है। जब तक आप सभी हेडर सामग्री दिखाई नहीं देते हैं तब तक आप मूल्यों का प्रयास कर सकते हैं।

उदाहरण के लिए:

इस मामले में, मैं 80 (pageMargin: [40, , 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' 
    ] 
} 
+0

मैं इसे आजमाने की कोशिश कर रहा हूं। आज अपडेट होगा। – d1sciple

+0

काम करने की पुष्टि की। धन्यवाद। – d1sciple

4

स्वीकार किए जाते हैं जवाब के साथ छवि प्राप्त करने के क्योंकि यह एक अच्छा है, लेकिन मैंने सोचा क्योंकि मुझे एक मिला है, मुझे विश्वास है कि दूसरों के लिए बेहतर काम कर सकता है, खासकर अगर हेडर सामग्री की लंबाई अलग-अलग हो सकती है, तो मैं साझा करूंगा।

पीडीएफकेके में टेबल्स में निफ्टी फीचर है जहां प्रत्येक पृष्ठ पर शीर्षलेख पंक्तियां दोहराई जाती हैं। तो, आप एक टेबल बना सकते हैं जो आपके पूरे दस्तावेज़ को लपेटता है, और जितनी चाहें उतनी हेडर पंक्तियां जोड़ता है, और वे सभी पृष्ठों पर चिपचिपा रहेंगे। यहां एक उदाहरण डॉक्टर डीफ़ है।

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

संबंधित मुद्दे