如何使用fillColor填充pdfmake的列背景颜色？

Question

有没有选项填充列背景颜色fillColor: '#dedede'？ fillColor非常适用于tablecell,同时它不适用于列:(

<script src="https://rawgit.com/bpampuch/pdfmake/master/build/vfs_fonts.js"></script>
<script src="https://rawgit.com/yelouafi/pdfmake/master/build/pdfmake.js"></script>
<script>
  function print(argument) {
    // open the PDF in a new window
    pdfMake.createPdf(docDefinition).open();
  }
</script>
<button onclick="print()" style="display:block; margin: 10px auto;padding: 20px 50px;">Print</button>
<hr>
<script>
  var docDefinition = {
    content: [
      'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns', {
        columns: [{
          // auto-sized columns have their widths based on their content
          width: 'auto',
          text: 'First column',
          fontSize: 30,
          fillColor: '#dedede'
        }, {
          // star-sized columns fill the remaining space
          // if there's more than one star-column, available width is divided equally
          width: '*',
          text: 'Second column'
        }, {
          // fixed width
          width: 100,
          text: 'Third column'
        }, {
          // percentage width
          width: '10%',
          text: 'Last column'
        }],
        // optional space between columns
        columnGap: 10
      },
      'This paragraph goes below all columns and has full width'
    ]
  };
</script>

Answer 1

我还没有将背景颜色应用于列.我认为你唯一的选择是使用表格.

在这一行下面,我附上了一个简单的代码,您可以直接粘贴到pdfmake playground上进行试用.

祝好运!

    var dd = {
    content: [
        'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns', 
        {
            style: 'section',
            table: {
                widths: [ '15%',  '*',  '35%'],
                body: [
                    [ 
                        {
                          text: 'first column',
                          fillColor: '#555555',
                          color: '#00FFFF',
                        },
                        {
                          text: 'second column',
                          color: '#555555',
                          fillColor: '#dedede'
                        },
                        {
                          text: 'third column',
                          fillColor: '#555555'
                        }
                    ]
                ]
            },
            layout: 'noBorders'
        }
    ],
    styles: {
        section: {
            fontSize: 9,
            color: '#FFFFFF',
            fillColor: '#2361AE',
            margin: [0, 15, 0, 5]
        }
    },
    defaultStyle: {
        alignment: 'center'
    }
}

Answer 2

使用表格来包装您的内容

设置一个只有一个单元格且无边框的表格，并使用 fillColor 设置背景。

var docDefinition = {
  content: [
  {
    table: {
      headerRows: 0,
      body: [
        [{
            // Choose your color
            fillColor: '#bada55',
            // Remove distasteful border
            border: [false, false, false, false],

            // Columns/Whatever goes here
            columns: [{
              // auto-sized columns have their widths based on their content
              width: 'auto',
              text: 'First column',
              fontSize: 30,
              fillColor: '#dedede'
            }, {
              // star-sized columns fill the remaining space
              // if there's more than one star-column, available width is divided equally
              width: '*',
              text: 'Second column'
            }, {
              // fixed width
              width: 100,
              text: 'Third column'
            }, {
              // percentage width
              width: '10%',
              text: 'Last column'
            }],
            // optional space between columns
            columnGap: 10
          },
          'This paragraph goes below all columns and has full width'
        ]

        }],
      ]
    }
  },
};

这让我回想起互联网使用表格设计的年代。如果没有其他东西支持填充颜色属性，则将其包装在支持它的内容中；一张桌子。