Tăng kích thước tiêu đề pdfMake

Question

Tôi đang cố gắng tăng kích thước tiêu đề trên pdf bằng cách sử dụng pdfmake.

Hiện tại tôi có thể nhận được tiêu đề ở cả bên trái và bên phải của trang, đó là những gì tôi muốn, nhưng khi chiều cao vượt qua 26, hình ảnh biến mất vì có một lượng không gian giới hạn cho tiêu đề.

• Lề có thể được giảm để tăng kích thước nhưng tôi muốn giữ lại biên độ .
• Tôi đã tìm kiếm pdfMake github cho các vấn đề tương tự mà không thành công.

Nếu bạn cần phải kiểm tra bất cứ điều gì, hãy thử đoạn code tôi có cho đến nay trên pdfmake playground

Hãy nhớ, bạn sẽ cần phải sao chép và dán tất cả các mã này trên "sân chơi" để làm cho nó hoạt động.

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

Bạn cần thêm trangMargins và điều chỉnh tham số thứ hai (lề trên) thành tổng kích thước tiêu đề của bạn. Bạn có thể thử các giá trị cho đến khi hiển thị tất cả nội dung tiêu đề.

Ví dụ:

Trong trường hợp này, tôi sử dụng 80 (pageMargin: [40, , 40,60]) để có được những hình ảnh với chiều cao 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

Câu trả lời được chấp nhận cho điều này là tốt nhất, nhưng tôi nghĩ vì tôi tìm thấy một trong những tin tôi có thể làm việc tốt hơn cho người khác, đặc biệt là nếu chiều dài nội dung tiêu đề có thể thay đổi, tôi sẽ chia sẻ.

Các bảng trong pdf có một tính năng tiện lợi trong đó hàng tiêu đề được lặp lại trên mỗi trang mà bảng trải dài. Vì vậy, bạn có thể tạo một bảng kết thúc tốt đẹp toàn bộ tài liệu của bạn và thêm nhiều hàng tiêu đề như bạn muốn và chúng sẽ được dán trên tất cả các trang. Đây là một ví dụ 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 
    } 
    }, 

};