pdfmake：對齊列中的表格

Question

無論我嘗試了什麼，我都無法對齊第二列中的表格。

var docDefinition = { 
    content: [ 
     { 
      columns: [ 
       { text: 'Column 1', 
       }, 
       [ 
        { 
         text: 'Column 2', 
         alignment: 'right' // WORKS 
        }, 
        { 
         alignment: 'right', // NO EFFECT 
         table: { 
          alignment: 'right', // NO EFFECT 
          body: [ 
           ['Date', '07/21/2017' ], 
           ['Representative', 'Test' ] 
          ] 
         } 
        } 
       ] 
      ] 
     } 
    ] 
}; 

pdfMake.createPdf(docDefinition).download(); 

https://jsfiddle.net/8kqnrduw/

我在尋找任何可能的解決方法。

請幫

預期結果：

Answer 1

您如何看待這個想法？

{ 
     alignment: 'right', 
     columns: [ 
     { 
      stack: [ 
       { table: {....}} 
      ] 
     } 
     ] 
    } 

Answer 2

你的問題是相關對準不，它是關於嵌套列和列寬。在pdfmake中的對齊用於對齊的文本，就像您使用text: 'Column 2'的對齊方式以及表格單元格內的每個文本的對齊方式一樣。

在你的情況下，你創建了兩列，分別是'*'星號（填充剩餘寬度），這是默認的列寬。所以，你有一個帶有text: 'Column 1'的50％寬度列和帶有text: 'Column 2'的50％寬度列和一個低於text: 'Column 2'的表格（這不完全是你想要的）。

所以，你應該做的是你需要在第二列text: 'Column 2'的部分內創建一個嵌套的列結構，該列已經是頁面的一半寬度。這個嵌套的列結構將包含兩列;一個用於桌子，寬度與桌子內部的元素寬度一樣寬，另一列用空的內容只是爲了將桌子保持在適當的位置。

您的預期結果的工作代碼如下。您也可能會看到screenshot here for the code and its output at the pfdmake playground。

var docDefinition = { 
    content: [ 
     { 
      columns: [ 
       { 
        text: 'Column 1', 
       }, 
       [ 
        { 
         text: 'Column 2', 
         alignment: 'right' // Aligns 'Column 2' text to right 
        }, 
        { 
         columns: [ 
          { 
           text:'', 
           width: '*' 
          }, 
          { 
           table: { 
            body: [ 
             ['Date', '07/21/2017' ], 
             ['Representative', 'Test' ] 
            ] 
           }, 
           alignment: 'right', // Optional, for body texts 
           width: 'auto' // Changes width of the table 
          } 
         ] 
        } 
       ] 
      ] 
     } 
    ] 
} 

Answer 3

試圖給這樣的：

body: [ 
     [{text: 'Date', alignment: 'right'}, {text: '07/21/2017', alignment: 'right'}], 
     [{text: 'Representative', alignment: 'right'}, {text: 'Test', alignment: 'right'}] 
     ]