问题

Is there any option to fill column background color with fillColor: '#dedede' ? fillColor works in tablecell very well at the same time it doesn't work for column :(

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

回答1:

I have not gotten apply background color to columns. I think the only option you have is to use tables.

Below this lines I have attached a simple code that you can paste directly at pdfmake playground in order to try it.

Good luck!

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

回答2:

Use a table to wrap your content

Setup a table with one cell and no border and use the fillColor to set the background.

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'
        ]

        }],
      ]
    }
  },
};

This takes me back to the years where the internet was styled using tables. If nothing else supports fill color property wrap it in what does support it; a table.

来源：https://stackoverflow.com/questions/28764174/how-to-fill-column-background-color-for-pdfmake-with-fillcolor

标签

javascript