Some aspects of formatting reports for pdf output

Hi,

It so happened that I needed to save the reports prepared by KoolReport as pdf. I took advantage of the excellent functionality provided by the free CloudExport package. With this package, you can save reports in pdf format but if you need to keep your styles like background, font coloring or maybe any others, you need to do additional steps and some of them were not evident for me. I had a long discussion with David from KoolReport and he helped me very much but I decided to keep all the recipes in one place - in this topic.

The main obvious idea is to use @media print CSS directive but there are some tricks on this way :-)

If you used direct inline styles like "cssStyle" => "background-color: #b1b1b1;" to style columns in your report or if you use inline styles when preparing the output with formatValue properties - some of them won't work for pdf version because it doesn't and can't set @media inline.
If you use bootstrap to format your report table the bootstrap CSS will try to overwrite your style and some of that rules will be very persistent :-)

Bootstrap uses the following CSS directive in its @media print section:

*, :after, :before {
	color: #000!important;
	text-shadow: none!important;
	background: 0 0!important;
	-webkit-box-shadow: none!important;
	box-shadow: none!important;
}

table td, .table th {
	background-color: #fff !important;
}

.table-bordered td, .table-bordered th {
	border: 1px solid #ddd !important;
}

It is not the full list - it is some of them that disturbed me to make my report looking good. The most annoying were the rules that set background color to white and the font color to black.

To apply styles to your pdf version of the report you have to:

3.1 add name property to your table

Table::create(array(
            "name" => "Table1",
...

3.2 add classes to all the HTML elements for which you want to set your own styles. You can do it inline or using the cssClass property with function:

"cssClass" => array(
                "td" => function ($row, $columnName) {
                    $cssClasses = "some-td-class-name"; //based on $columnName and $row
                    return $cssClasses;
                },
                "th" =>  function ($columnName) {
                    $cssClasses = "some-th-class-name"; //based on $columnName
                    return $cssClasses;
                },
                "tf" =>  function ($columnName) {
                    $cssClasses = "some-tf-class-name"; //based on $columnName
                    return $cssClasses;
                }
            )

3.3 create <style> section in the <head> section of your report HTML in the .view file and add the following code to <style>

 @media print {
            * {
                -webkit-print-color-adjust: exact !important;
            }
//define all styles for your classes here
}

3.3 you can use #name_of_your_table selector in your CSS and you have to add !important to every your style directive like this:

 #Table1 td.some-td-class-name {
                background-color: #b6001d !important;
                color: white !important;
            }

sometimes you will have to add -webkit-print-color-adjust: exact !important; to each group of styles too like this:

 #Table1 td.some-td-class-name {
                background-color: #b6001d !important;
                color: white !important;    
                 -webkit-print-color-adjust: exact !important;
            }

3.4 Don't set any styles for tr. Bootstrap will overwrite them with its style for td every time. I've not found the way to avoid it so I set my own styles for td.

3.5 set "printBackground" property to true. More details here.

I hope this topic helps you create nice pdf reports with KoolReport.

KoolReport's Forum

Some aspects of formatting reports for pdf output #1284

Awesome, thank Eugene. You are the best!

Build Your Excellent Data Report