Exporting with bootstrap

Dana Schuett commented on Oct 31, 2017

I am trying to figure out why the example I downloaded from you does not export the pdf with bootstrap ( I am referring to the sakila rental example). Let me set up:

I have installed phantomjs.exe in the bin folder, version 2.1.1
I attempted to include the include line before the extension to the main class and inside it. Example below:

class MyReport extends \koolreport\KoolReport
{
    use \koolreport\export\Exportable;
    use \koolreport\clients\BootstrapCSS
    ...
}

All the sakila files have a reference to the bootstrap.min.css and the bootstrap-theme.min.css. This includes the .view files that the downloaded example uses to export.
When it does export as well, despite the include for google charts, the chart is cut off on the left. Rather does not keep itself in the container of the page. as shown below, however this may be an unrelated issue I just thought i might give it to help.

When I copy the bootstrap css into the embedded.css file located in the packages->export->pdf folder as the pdf.js file references when there is nothing else provided, the bootstrap css loads on the pdf. I made sure the include bootstrap line was being called to use the resource manager addcssfile(, which it is but still no dice.

So I am trying to understand where I am going wrong. If there is anything else I can include for you let me know. I just find it wrong that I need to be copying my bootstrap css into the embedded css for phantom to work when it looks to be pulling it from the file being exported to use?

KoolReport commented on Oct 31, 2017

Hi,

Could you please let me know what version of Export package you are using? You may view the information at packages/export/composer.json. Please make sure you are using the latest version which is 2.5.0

Please try to reverse the orders like this to see if it work?

...
    use \koolreport\clients\BootstrapCSS;
    use \koolreport\export\Exportable;
...

Dana Schuett commented on Oct 31, 2017

No dice I will post my individual files here for you to show where I am at with this example.

Dana Schuett commented on Oct 31, 2017

1) export

<?php
require_once "SakilaRental.php";
$report = new SakilaRental;

$report->run()
->export('SakilaRentalPdf')
->pdf(array(
    "format"=>"A4",
    "orientation"=>"portrait"
))
->toBrowser("sakila_rental.pdf");
?>

2) index

<?php
require_once "SakilaRental.php";
$report = new SakilaRental;
$report->run();
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Sakila Rental</title>
        <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="../../../assets/css/example.css" />
    </head>
    <body>      
        <div class="container box-container">
            <?php $report->render();?>
        </div>
    </body>
</html>

3) SakilaRental.php

<?php
require_once "../../../../koolreport/autoload.php";

use \koolreport\KoolReport;
use \koolreport\processes\Filter;
use \koolreport\processes\TimeBucket;
use \koolreport\processes\Group;
use \koolreport\processes\Limit;

class SakilaRental extends KoolReport
{
    use \koolreport\export\Exportable;
    use \koolreport\clients\BootstrapCSS;
    
    public function settings()
    {
        return array(
            "dataSources"=>array(
                "sakila_rental"=>array(
                    "class"=>'\koolreport\datasources\CSVDataSource',
                    'filePath'=>dirname(__FILE__)."\sakila_rental.csv",
                )
            )
        );
    }   
    protected function setup()
    {
        $this->src('sakila_rental')
        ->pipe(new TimeBucket(array(
            "payment_date"=>"month"
        )))
        ->pipe(new Group(array(
            "by"=>"payment_date",
            "sum"=>"amount"
        )))
        ->pipe($this->dataStore('sale_by_month'));
    } 
}
?>

4)SakilaRentalPDF.view

<?php
    use \koolreport\widgets\koolphp\Table;
    use \koolreport\widgets\google\ColumnChart;
?>

<html>
    <body style="margin:0.5in 1in 0.5in 1in">
        <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap.theme.min.css" />   
        <div class="page-header" style="text-align:right"><i>Sakila Rental Report</i></div>
        <div class="page-footer" style="text-align:right">{pageNum}</div>
        <div class="text-center">
            <h1>Cash In Report</h1>
            <h4>This report show the cash-in report per month</h4>
        </div>
        <hr/>

        <?php
        ColumnChart::create(array(
            "dataStore"=>$this->dataStore('sale_by_month'),  
            "columns"=>array(
                "payment_date"=>array(
                    "label"=>"Month",
                    "type"=>"datetime",
                    "format"=>"Y-n",
                    "displayFormat"=>"F, Y",
                ),
                "amount"=>array(
                    "label"=>"Amount",
                    "type"=>"number",
                    "prefix"=>"$",
                )
            ),
            "width"=>"100%",
        ));
        ?>
       <?php
        Table::create(array(
            "dataStore"=>$this->dataStore('sale_by_month'),
            "columns"=>array(
                "payment_date"=>array(
                    "label"=>"Month",
                    "type"=>"datetime",
                    "format"=>"Y-n",
                    "displayFormat"=>"F, Y",
                ),
                "amount"=>array(
                    "label"=>"Amount",
                    "type"=>"number",
                    "prefix"=>"$",
                            )
            ),
            "cssClass"=>array(
                "table"=>"table table-hover table-bordered"
            )
        ));
       ?>
    </body>
</html>

KoolReport commented on Oct 31, 2017

Does it run on local server or online? f it is online, could you please send me the link.

May I know the structure of your folder? where do you put he koolreport folder and where do you put your report file.

Dana Schuett commented on Nov 17, 2017

Sorry in the delay, this was not a priority. However in setting up a test demo for you on our hosted site i found that the linux phantom client actually exported with the bootstrap but the win does not. We need the windows exe working with bootstrap for our production environment internally. Suggestions?

Dana Schuett commented on Jan 29, 2018

Any update on this?

David Winterburn commented on Jan 30, 2018

Hi Dana,

Please go to the phantomjs download page and download a version suited for your environment: http://phantomjs.org/download.html Then replace the run file in the folder "export/bin" with it and try our exporting example. Thanks!

KoolReport's Forum

Exporting with bootstrap #142

Build Your Excellent Data Report