KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

CSS files not loading in exported pdf #2079

Open FinChamps opened this topic on on May 13, 2021 - 7 comments

FinChamps commented on May 13, 2021

Hi

We are using KoolReport Pro with export package in our project. Everything works fine in the application but when we export it to PDF the css styles are not being loaded.

I went through similar topics in this forum and tried to debug with the suggested solutions but I am unable to find the cause of the issue. I would really appreciate some help.

Here's what I tried based on 1269

  • The page renders correctly when I render() report with the Pdf view.

  • I can access the css file from the server using wget https://demoincasso.casecontrol.dev/metronic/assets/css/style.bundle.css

I can provide the credentials to our dev server but I am not sure how do I share it privately with the KoolReport support team. So attaching code + screenshots instead.


Browser: In browser


PDF: Pdf page 1

Pdf page 2

Please let me know if you need any additional details to debug the issue.

Thank you.


Files:

BaseKoolReport.php

namespace App\Reports\Administration;

use koolreport\KoolReport;
use koolreport\laravel\Eloquent;
use koolreport\laravel\Friendship;

class BaseKoolReport extends KoolReport
{
	use Friendship;

    protected function settings()
    {
        return array(
            "dataSources"=>array(
                "eloquent"=>array(
                    "class"=>Eloquent::class, // This is important
                ),
            )
        );
    }
}

DebtReceivablePerCreditor.php

<?php
namespace App\Reports\Administration;

use App\Models\Administration;
use koolreport\export\Exportable;
use koolreport\inputs\Bindable;
use koolreport\inputs\GETBinding;
use koolreport\processes\AggregatedColumn;
use koolreport\processes\CalculatedColumn;
use koolreport\processes\ColumnRename;
use koolreport\processes\Group;
use koolreport\processes\Sort;

class DebtReceivablePerCreditor extends BaseKoolReport
{
    use Bindable;
    use Exportable;
    use GETBinding;

    protected function defaultParamValues()
    {
        // Application specific logic 
    }

    protected function bindParamsToInputs()
    {
        // Application specific logic
    }

    function setup()
    {
        // Application specific logic
    }
}


DebtReceivablePerCreditor.view.php

<?php

use koolreport\inputs\Select;
use koolreport\processes\Sort;
use koolreport\widgets\google\PieChart;
use koolreport\widgets\koolphp\Table;

?>


<!-- Filters -->
<div class="row">
    <div class="col-md-12">
        <form method="get">
            <div class="row">
                <label class="col-form-label kt-ml-10"><?php echo trans('common.label.period') ?>: </label>
                <div class="col-lg-2">
                    <?php
                        Select::create(array(
                            "name" => "interval",
                            "attributes"=>array(
                                "class" => "form-control form-control-sm filter-select"
                            ),
                            "data"=>array(
                                trans('common.label.last_year') =>"1 YEAR",
                                trans('common.label.last_3_months') =>"3 MONTHS",
                                trans('common.label.last_month') =>"1 MONTH",
                                trans('common.label.last_week') =>"1 WEEK",
                            ),
                        ));
                    ?>
                </div>
                <div class="col-lg-4">
                    <div class="btn-group">
                        <button type="submit" class="btn btn-sm btn-wide btn-primary" >
                            <span><?php echo trans('common.button.apply') ?></span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <!-- Pie Chart - Top 10 debt receivable amount -->
    <div class="col-md-6">
    <?php
        PieChart::create(array(
            "title" => trans('common.label.top_10_debt_receivable_amount'),
            "dataSource" => $this->dataStore("casesWithCreditor"),
            "columns" => array(
                "creditor_relation_name",
                "total_amount_due" => [
                    'label' => trans('common.label.capital_sum'),
                    'prefix' => '€ ',
                    "annotation" => function($row) {
                        return "€".european_number_format($row["total_amount_due"]);
                    }
                ],
            )
        ));
    ?>
    </div>

    <!-- Pie Chart - Top 10 number of records -->
    <div class="col-md-6">
    <?php
        PieChart::create(array(
            "title" => trans('common.label.top_10_number_of_records'),
            "dataSource" => $this->dataStore($this->dataStore("casesWithCreditor")->makeCopy())
                ->process(new Sort(array(
                    "cases_count" => "desc"
                ))),
            "columns" => array(
                "creditor_relation_name",
                "cases_count"
            )
        ));
    ?>
    </div>
</div>

<br>
<br>

<div class="row">
    <div class="col-md-12">
        <?php
            Table::create([
                "dataSource" => $this->dataStore("casesWithCreditor"),
                "showFooter" => "bottom",
                "columns" => [
                    "creditor_relation_name" => [
                        'label' => trans('common.label.creditor'),
                        "footerText" => trans('common.label.total'),
                    ],
                    "average_amount_due" => [
                        'label' => trans('common.label.average'),
                        'prefix' => '€ ',
                        "decimalPoint" => ",",
                        "thousandSeparator" => ".",
                        "cssStyle" => "text-align:right;",
                    ],
                    "cases_count" => [
                        'type' => 'number',
                        'label' => trans('common.label.no_of_records'),
                        'footer' => 'sum',
                        "cssStyle" => "text-align:right;",
                    ],
                    "total_amount_due" => [
                        'label' => trans('common.label.debt_receivable'),
                        'prefix' => '€ ',
                        "decimalPoint" => ",",
                        "thousandSeparator" => ".",
                        'footer' => 'sum',
                        "cssStyle" => "text-align:right;",
                    ],
                    "percentage" => [
                        'label' => trans('common.label.percentage'),
                        'suffix' => '%',
                        "decimalPoint" => ",",
                        "thousandSeparator" => ".",
                        "cssStyle" => "text-align:right;",
                    ],
                ],
                "cssClass" => array(
                    "table" => "table table-striped table-bordered",
                )
            ]);
        ?>
    </div>
</div>

DebtReceivablePerCreditorPdf.view.php

<?php

use koolreport\processes\Sort;
use koolreport\widgets\google\PieChart;
use koolreport\widgets\koolphp\Table;

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--begin::Global Theme Styles(used by all pages) -->
    <link href="<?php echo asset('metronic/assets/plugins/global/plugins.bundle.css') ?>" rel="stylesheet" type="text/css" />
    <link href="<?php echo asset('metronic/assets/css/style.bundle.css') ?>" rel="stylesheet" type="text/css" />
    <!--end::Global Theme Styles -->

</head>

<body style="margin: 20px 30px 20px 30px">
    <div class='page-header' style='text-align:right; height:20px; margin-top:10px;'>
        <span><?php echo trans('common.label.page') ?> {pageNum}/{numPages}</span>
    </div>

    <div class="row">
        <!-- Pie Chart - Top 10 debt receivable amount -->
        <div class="col-md-6">
        <?php
            PieChart::create(array(
                "title" => trans('common.label.top_10_debt_receivable_amount'),
                "dataSource" => $this->dataStore("casesWithCreditor"),
                "columns" => array(
                    "creditor_relation_name",
                    "total_amount_due" => [
                        'label' => trans('common.label.capital_sum'),
                        'prefix' => '€ ',
                        "annotation" => function($row) {
                            return "€".european_number_format($row["total_amount_due"]);
                        }
                    ],
                )
            ));
        ?>
        </div>

        <!-- Pie Chart - Top 10 debt receivable amount -->
        <div class="col-md-6">
        <?php
            PieChart::create(array(
                "title" => trans('common.label.top_10_debt_receivable_amount'),
                "dataSource" => $this->dataStore($this->dataStore("casesWithCreditor")->makeCopy())
                    ->process(new Sort(array(
                        "cases_count" => "desc"
                    ))),
                "columns" => array(
                    "creditor_relation_name",
                    "cases_count"
                )
            ));
        ?>
        </div>
    </div>

    <br>
    <br>

    <div class="row">
        <div class="col-md-12">
            <?php
                Table::create([
                    "dataSource" => $this->dataStore("casesWithCreditor"),
                    "showFooter" => "bottom",
                    "columns" => [
                        "creditor_relation_name" => [
                            'label' => trans('common.label.creditor'),
                            "footerText" => trans('common.label.total'),
                        ],
                        "average_amount_due" => [
                            'label' => trans('common.label.average'),
                            'prefix' => '€ ',
                            "decimalPoint" => ",",
                            "thousandSeparator" => ".",
                            "cssStyle" => "text-align:right;",
                        ],
                        "cases_count" => [
                            'type' => 'number',
                            'label' => trans('common.label.no_of_records'),
                            'footer' => 'sum',
                            "cssStyle" => "text-align:right;",
                        ],
                        "total_amount_due" => [
                            'label' => trans('common.label.debt_receivable'),
                            'prefix' => '€ ',
                            "decimalPoint" => ",",
                            "thousandSeparator" => ".",
                            'footer' => 'sum',
                            "cssStyle" => "text-align:right;",
                        ],
                        "percentage" => [
                            'label' => trans('common.label.percentage'),
                            'suffix' => '%',
                            "decimalPoint" => ",",
                            "thousandSeparator" => ".",
                            "cssStyle" => "text-align:right;",
                        ],
                    ],
                    "cssClass" => array(
                        "table" => "table table-striped table-bordered",
                    )
                ]);
            ?>
        </div>
    </div>

    <div class='page-footer' style='text-align:right; height:20px; margin-bottom:10px;'>
        <span><?php echo trans('common.label.page') ?> {pageNum}/{numPages}</span>
    </div>
</body>
</html>

Sebastian Morales commented on May 14, 2021

Would you pls let us know which type of web server you use? Rgds,

FinChamps commented on May 14, 2021

Hi Sebastian,

We use AWS EC2 instance for our server and it is running Ubuntu 18.04.4 LTS.

Please let me know if you need any more specific details.

Thanks

Sebastian Morales commented on May 17, 2021

In your report pdf view pls try to use an absolute path for css files. Let us know the result. Tks,

FinChamps commented on May 18, 2021

Hi Sebastian,

I believe we are already using absolute path for css files. Yet, I have replaced the 'asset()' function with full url of the website. The issue still remains the same.

This is the updated report pdf view file:

<?php

use koolreport\processes\Sort;
use koolreport\widgets\google\PieChart;
use koolreport\widgets\koolphp\Table;

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--begin::Global Theme Styles(used by all pages) -->
    <link href="https://demoincasso.casecontrol.dev/metronic/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
    <link href="https://demoincasso.casecontrol.dev/metronic/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
    <!--end::Global Theme Styles -->

</head>

<body style="margin: 20px 30px 20px 30px">
    <div class='page-header' style='text-align:right; height:20px; margin-top:10px;'>
        <span><?php echo trans('common.label.page') ?> {pageNum}/{numPages}</span>
    </div>

    <div class="row">
        <!-- Pie Chart - Top 10 debt receivable amount -->
        <div class="col-md-6">
        <?php
            PieChart::create(array(
                "title" => trans('common.label.top_10_debt_receivable_amount'),
                "dataSource" => $this->dataStore("casesWithCreditor"),
                "columns" => array(
                    "creditor_relation_name",
                    "total_amount_due" => [
                        'label' => trans('common.label.capital_sum'),
                        'prefix' => '€ ',
                        "annotation" => function($row) {
                            return "€".european_number_format($row["total_amount_due"]);
                        }
                    ],
                )
            ));
        ?>
        </div>

        <!-- Pie Chart - Top 10 debt receivable amount -->
        <div class="col-md-6">
        <?php
            PieChart::create(array(
                "title" => trans('common.label.top_10_debt_receivable_amount'),
                "dataSource" => $this->dataStore($this->dataStore("casesWithCreditor")->makeCopy())
                    ->process(new Sort(array(
                        "cases_count" => "desc"
                    ))),
                "columns" => array(
                    "creditor_relation_name",
                    "cases_count"
                )
            ));
        ?>
        </div>
    </div>

    <br>
    <br>

    <div class="row">
        <div class="col-md-12">
            <?php
                Table::create([
                    "dataSource" => $this->dataStore("casesWithCreditor"),
                    "showFooter" => "bottom",
                    "columns" => [
                        "creditor_relation_name" => [
                            'label' => trans('common.label.creditor'),
                            "footerText" => trans('common.label.total'),
                        ],
                        "average_amount_due" => [
                            'label' => trans('common.label.average'),
                            'prefix' => '€ ',
                            "decimalPoint" => ",",
                            "thousandSeparator" => ".",
                            "cssStyle" => "text-align:right;",
                        ],
                        "cases_count" => [
                            'type' => 'number',
                            'label' => trans('common.label.no_of_records'),
                            'footer' => 'sum',
                            "cssStyle" => "text-align:right;",
                        ],
                        "total_amount_due" => [
                            'label' => trans('common.label.debt_receivable'),
                            'prefix' => '€ ',
                            "decimalPoint" => ",",
                            "thousandSeparator" => ".",
                            'footer' => 'sum',
                            "cssStyle" => "text-align:right;",
                        ],
                        "percentage" => [
                            'label' => trans('common.label.percentage'),
                            'suffix' => '%',
                            "decimalPoint" => ",",
                            "thousandSeparator" => ".",
                            "cssStyle" => "text-align:right;",
                        ],
                    ],
                    "cssClass" => array(
                        "table" => "table table-striped table-bordered",
                    )
                ]);
            ?>
        </div>
    </div>

    <div class='page-footer' style='text-align:right; height:20px; margin-bottom:10px;'>
        <span><?php echo trans('common.label.page') ?> {pageNum}/{numPages}</span>
    </div>
</body>
</html>
Sebastian Morales commented on May 19, 2021

Hi, pls use the following export command:

$report->run->export("SalesQuartersPdf")
    ->settings([
        'useLocalTempFolder' => true, 
    ])
    ->pdf(...)
    ...

Then run export and check in your report directory for "tmp" subdirectory. In this you could find a .tmp text file like "60a2506a6ea0f1.tmp". Pls open it (actually a html file) with your text editor and see if it contains your needed css links?

FIMM commented on Feb 24, 2022

I have same issue. My tmp file contain all css and logo but in pdf no css. Please help me. Thanks in advance

Sebastian Morales commented on Feb 24, 2022

Pls follow my previous answer to check if css files are loaded in the tmp file:

https://www.koolreport.com/forum/topics/2079#p11162

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

Export