KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.

Font and background styles in pdf reports #1037

Closed Eugene opened this topic on on Aug 12 - 22 comments

Eugene commented on Aug 12

Hi, I've already asked about this in one of my topics but recommended solution does not work.

So what i did:

  • I included all my style inline like this:

"grouping" => array(
            "catName" => array(
                "top" => "<td colspan=\"2\" <td style='color: red'><b>{catName} </b></td>",
  • Also I have added the following style section in the head part of my generated html
<style>
        body {
            -webkit-print-color-adjust: exact;
        }
    </style> 

But the exported pdf is still black and white

David Winterburn commented on Aug 13

Hi Eugene,

Would you please tell us which package did you use to export to PDF, is it Export or CloudExport? Thanks!

Eugene commented on Aug 13

I use CloudExport

Eugene commented on Aug 13

Just noticed that the font-size does not work also... it is almost impossible to make good view report.. :-(

Eugene commented on Aug 15

any ideas?

do your own pdfs keep the css formatting if you use pdf export via CloudExport?

David Winterburn commented on Aug 16

Hi Eugene,

Would you please post the relevant parts of your php code for the report's setup as well as of the pdf view file? Thanks!

Eugene commented on Aug 16

Sure i can but it will be pretty long


require_once "../../koolreport/core/autoload.php";

require_once "spoiled2_export.php";

$report = new spoiled2_export;
$report->run();
$report->cloudExport("spoiled2_export")
    ->chromeHeadlessio("***")
    ->pdf([
        "scale"=>0.6,
        "format"=>"A4",
        "landscape"=>false,
        "displayHeaderFooter"=>true,
        "printBackground"=>true,
        "margin"=>array(
            "top"=>'50px',
            "bottom"=>'40px',
        ),
        "headerTemplate"=> '<div id="header-template"
                style="font-size:7px !important; color:#808080; padding-left:10px">
                Created: <span class="date"></span><br>
                Report name: <span class="title"></span><span></span>
            </div>',
        "footerTemplate"=> '<div id="footer-template"
                style="font-size:7px !important; color:#808080; padding-left:10px">
                Page <span class="pageNumber"></span>
                of <span class="totalPages"></span>
            </div>'
    ])
    ->toBrowser("spoiled_" . date('dmyHi').".pdf");

<?php
// Require autoload.php from koolreport library
require_once "../../koolreport/core/autoload.php";


use \koolreport\processes\CalculatedColumn;
use \koolreport\cube\processes\SuperCube;
use \koolreport\processes\Sort;
use \koolreport\processes\ColumnRename;
use \koolreport\processes\Join;



class spoiled2_export extends \koolreport\KoolReport
{
    use \koolreport\clients\Bootstrap;
    use \koolreport\inputs\Bindable;
    use \koolreport\inputs\POSTBinding;
    use \koolreport\cloudexport\Exportable;


    protected function bindParamsToInputs()
    {
        return array(
            "barmode" => "barmode",
            "date" => "dateInput",
            "reportSelect" => "reportSelect",
            "viewAmount" => "viewAmountbox",
            "viewVs" => "viewVsbox",
            "consumptions" => "consumptions",
        );
    }

    public function settings()
    {
        $config = include "../../config.php";
        return array(
            "dataSources" => array(
                "quinos" => $config["quinos"]
            )
        );
    }

    protected function setup()
    { ... THIS PART IS VERY LONG 
}
<?php
use koolreport\processes\CalculatedColumn;
use \koolreport\widgets\koolphp\Table;

$periode1 = DateTime::createFromFormat("Y-m-d H:i:s", $this->params["dateStart1"])->format("F Y");
$periode2 = DateTime::createFromFormat("Y-m-d H:i:s", $this->params["dateStart2"])->format("F Y");
$stock =  ($this->params["barmode"]) ? 'BAR WAREHOUSE' : 'KITCHEN WAREHOUSE';
$sort_template = array();

if ($this->params["viewAmount"][0] == '1') {
    $sort_template = array(
        "periode - periode2 | total - sum" => "asc");
} elseif ($this->params["viewVs"][0] == '2') {
    $sort_template = array(
        "quantityVS" => "desc");
} else {
    $sort_template = array(
        "name" => "asc");
}

$calculated = $this->dataStore('spoiled')->process(new CalculatedColumn(array(

    "diff_consum" => function ($data) {
        if ($data["consumption1"] == "0") {
            return "N/A";
        } else {
            return ($data["consumption2"] - $data["consumption1"]) / $data["consumption1"] * 100;
        }
    },)));
?>

<html lang="en">
<head>
    <link rel="stylesheet" href="/qreports/koolreport/bootstrap3/assets/core/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/qreports/koolreport/bootstrap3/assets/core/css/bootstrap-theme.min.css"/>
    <meta charset="UTF-8">
    <title>Spoiled Report</title>
    
</head>
<body style="-webkit-print-color-adjust:exact;">
<div class="container box-container">
    <div class="text-center">
        <h2>Spoiled Report</h2>
    </div>
    <hr/>
    <hr/>
    <div>
        <b>Stock: </b> <?= $stock; ?><br><br>
        <b>Main Periode: </b> <?= $periode2; ?><br><br>
    </div>
    <div class="row">
        <?php
        Table::create(array(
            "dataStore" => $calculated,
            "showFooter" => "top",
            "sorting" =>  $sort_template,
            "columns" => array(
                "name" => array(
                    "label" => "Item Name",
                ),
                "periode - periode1 | quantity - sum" => array(
                    "label" => "Quantity<br>" . $periode1,
                    "formatValue" => function ($value, $row) {
                        $value1 = number_format($value, 2, '.', ',') . " " . $row["uom"];
                        return $value1;
                    },
                    "cssStyle" => "background-color: #b1dfbb;",
                ),
                "periode - periode2 | quantity - sum" => array(
                    "label" => "Quantity<br>" . $periode2,
                    "formatValue" => function ($value, $row) {
                        $value1 = number_format($value, 2, '.', ',') . " " . $row["uom"];
                        return $value1;
                    }
                ),
                "quantityVS" => array(
                    "label" => "Quantity:<br>current vs previous",
                    "formatValue" => function ($value, $row) {
                        return ($value == 'N/A') ? 'new spoiled item' : number_format($value, 1, '.', ',') . "%";
                    },
                    "cssStyle" => "background-color: #D3D3D3;",
                ),
                "periode - periode1 | total - sum" => array(
                    "label" => "Amount<br>" . $periode1,
                    "footer" => "sum",
                    "cssStyle" => "background-color: #b1dfbb;",
                    "formatValue" => function ($value, $row) {
                        $value1 = number_format($value, 0, '.', ',');
                        return $value1;}
                ),
                "periode - periode2 | total - sum" => array(
                    "label" => "Amount<br>" . $periode2,
                    "footer" => "sum",
                    "formatValue" => function ($value, $row) {
                        $value1 = number_format($value, 0, '.', ',');
                        return $value1;}
                ),
                "amountVS" => array(
                    "label" => "Amount:<br>current vs previous",
                    "formatValue" => function ($value, $row) {
                        return ($value == 'N/A') ? 'new spoiled item' : number_format($value, 1, '.', ',') . "%";
                    },
                    "cssStyle" => "background-color: #D3D3D3;",
                ),
                "diff_consum" => array(
                    "label" => "Consumption:<br>current vs previous",
                    "formatValue" => function ($value, $row) {
                        return ($value === 'N/A') ? $value : number_format($value, 1, '.', ',') . "%";
                    },
                    "cssStyle" => "background-color: orange;",
                ),
            ),
            "excludedColumns" => $this->params["excluded"],
//            "grouping" => array(
//                "category" => array(
//                    "top" => "<td <td class='top_group'><b>{category} </b></td>",
//                ),
//            ),
            "cssClass" => array(
                "table" => "table table-hover table-bordered",
                "td" => function ($row, $columnName) {
                    return ($columnName == "name") ? "cell-class-name cell-class-small" : "cell-class cell-class-small";
                },
                "th" => "cell-class",
                "tf" => "footer-class"
            )
        ))
        ?>
    </div>
</body>
</html>

Eugene commented on Aug 22

up :-/

KoolReport commented on Aug 22

We have sent the case to dev.team so no worry we will answer you soon.

David Winterburn commented on Aug 23

Hi Eugene,

Would you please let us know specifically which css tyle for which part of the page doesn't work in pdf cloud export? Thanks!

Eugene commented on Aug 23

Honestly, all CSS do not work All background-color for example...

David Winterburn commented on Aug 23

Hi Eugene,

By default, pdf cloud export uses print css media which modifies background color when printing. A direct inline style like "cssStyle" => "background-color: #b1dfbb;" won't work because it doesn't and can't set @media inline. Thus, for your background color to work, please set css class for your table's column, row or cell and add the following css rules to the page:

<style>
    @media  print {
      * {
        -webkit-print-color-adjust: exact !important;
      }   
    
      #table1 td.column-1 {
        background-color: #b1dfbb !important;
      }

    }
</style> 

Let us know if this background-color rules work for you and if there's any css issue left when cloud exporting. Thanks!

Eugene commented on Aug 23

What do I need to use for column names?

David Winterburn commented on Aug 23

To set class name for Table's element please use the cssClass property with function:

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

and after that I do like this

<style>
    @media  print {
      * {
        -webkit-print-color-adjust: exact !important;
      }   
    
     #table1 td.some-name {
        background-color: #b1dfbb !important;
      }

    }
</style> 

correct?

David Winterburn commented on Aug 23

Yes, you are correct. Your table's name should be "table1", too.

Eugene commented on Aug 23

ok. Thank you. I will try and let you know...

Eugene commented on Aug 23

Sorry I try to implement your recommendations and I am a bit confused - I don't have any table name...

Could you show the example based on my code above

KoolReport commented on Aug 23

You can name it:

Table::create(array(
    "name"=>"table1",
    ...
));
David Winterburn commented on Aug 23

Here's an example of Table's name:

Table::create(array(
    "name" => "table1",
    ...
Eugene commented on Aug 23

ok. hope it finally helps...

Eugene commented on Aug 23

Wow, it works now... Dear David it took a long time but finally, I get what I need and I am really happy. Thank you so much.

Is it any way to see what html code is sent to ChromeHeadless.io to be sure that I send the correct code.

David Winterburn commented on Aug 23

Hi Eugene,

Please look in your server's temporary folder (or a local "tmp" folder if using ->settings(['useLocalTempFolder' => true])).

There should be a folder and a zip file like "5d5fb3b8c8b6f" and "5d5fb3b8c8b6f.zip" which contains export.html, js, css and image files to be sent to cloud export service to convert to pdf.

KoolReport Is Free and Open-Source!

KoolReport is a professional php reporting framework which saves you tons of time to construct dynamic data report & dashboard.

  • Connect to various datasources such as MySQL, SQL Server, MongoDB or even from CSV or Excel file.
  • Contain series of powerful built-in data processes for your data manipulation.
  • Generate stunning charts and graphs to help you communicate data insights to your audiences effectively.
  • Integrate seamlessly with any php frameworks such as Laravel, CodeIgniter, Symfony.
Download Now and register our tutorials to get started!

Download KoolReport
help needed
solved

CloudExport