Chromeheadless PDF Export: How to switch Landscape and add Header Footer

hung nguyen commented on Jan 11

Hi,

Thanks for this great package, I can create many great widgets for my Reports. I'm implementing PDF Export but I'm not sure how to configure it to switch views Portrait to Landscape view, and add a Header and Footer. Here's my current code:

Panel::create()->header("Partners Completed Audits")->width(1/1)->sub([

            Dropdown::create("exportOptions")
                ->title("<i class='far fa-file-pdf'></i> Export To PDF")
                ->items([
                    "Export All"=>MenuItem::create()
                        ->onClick(
                            Client::showLoader().
                            Client::widget("PartnersCompletedAudits_All")->exportToPDF("Partners Completed Audits",["all"=>true])
                        ),
                ])
                ->align("right")
                ->cssStyle("margin-bottom:5px;")
                ->cssClass("text-right"),
            PartnersCompletedAudits_All::create()->lazyLoading(true),
        ]),

class PartnersCompletedAudits extends TablePartner {

protected function onCreated()
{
    $this->pageSize(10);
    $this->pdfExportable(true); //Turn on pdf exportable for table
}

protected function onExporting($params)
{
    if($params["all"]===true) {
        $this->pageSize(null);
        $this->params($params);
    }
    return true;
}

public function exportedView()
{
    return  Html::div([
            Html::h1("Partners Completed Audits")
        ])->class("text-center")->view().
        $this->view();
}
protected function dataSource()
{
    return PartnerHelper::getNumberPartnerAudits(2);
}

}

Sebastian Morales commented on Jan 12

If you use normal KoolReport reports, for CloudExport options including "landscape" format and header/footer setting pls see the following docs and example links:

->pdf([
    "scale"=>1,
    "format"=>"A4",
    "landscape"=>true
])

https://www.koolreport.com/docs/cloudexport/chromeheadlessio/#export-options-pdf-for-headless-chrome-engine

You can also copy the footer_header example PDF view and export code in the code tabs at the end of the following example page:

CloudExport header/footer

In case you use KoolReport Dashboard, you can set pdf options right in the client-side exportToPDF() command like this:

                    "Export All"=>MenuItem::create()
                        ->onClick(
                            Client::showLoader().
                            Client::widget("PartnersCompletedAudits_All")->exportToPDF("Partners Completed Audits",[
    "all"=>true
    "landscape" => true,
])
                        ),

For header/footer in Dashboard you can either use "headerTemplate", "footerTemplate" options in the exportToPDF() command or set "viewFile" in pdfExportable() method and has footer/header tag in the PDF view file content:

                LineChartDemo::create()
                    ->pdfExportable([
                        'viewFile' => './pdf_views/LineChartDemo', //add <header>, <footer> tag in this PDF view file
                    ])

hung nguyen commented on Jan 12

Thanks for your response, Sebastian!

hung nguyen commented on Jan 12

Hi Sebastian,

This is the code I've tried

Client::widget("PartnersCompletedAudits_All")
->exportToPDF("Partners Completed Audits",
                                         [
                                            "all"=>true,
                                            "landscape"=>true,
                                            "scale"=>2
                                        ]
                                        )

I checked the request param and can see these 2 options

kdr[route]: App/PublicPage/KPI/PartnersCompletedAudits_All

kdr[action]: export

kdr[params][all]: true

kdr[params][landscape]: true

kdr[params][scale]: 2

kdr[params][type]: pdf

kdr[params][name]: Partners Completed Audits

kdr[encodedParams]: eyJhbGwiOnRydWUsImxhbmRzY2FwZSI6dHJ1ZSwic2NhbGUiOjIsInR5cGUiOiJwZGYiLCJuYW1lIjoiQXZlcmFnZSBPcmRlciBQcm9kdWN0aW9uIFRpbWUgU2xvd2VzdCJ9

state: eyJLUEkiOnsiU2VsZWN0MlBhcnRuZXIiOnsidmFsdWUiOiIifSwiU2VsZWN0MlByb2R1Y3QiOnsidmFsdWUiOiIifSwiU2VsZWN0MlByb2Nlc3MiOnsidmFsdWUiOiIifSwiRGF0ZVRpbWVQaWNrZXJEdWVEYXRlRnJvbSI6eyJ2YWx1ZSI6IiJ9LCJEYXRlVGltZVBpY2tlckR1ZURhdGVUbyI6eyJ2YWx1ZSI6IiJ9LCJzdGF0dXMtc2VhcmNoIjp7InZhbHVlIjpbImFjdGl2ZV9vcmRlcnMiXX19fQ==

But the PDF didn't render as Landscape and the Scale level still 1.

May I ask did I do something wrong?

Sebastian Morales commented on Jan 15

You probably set nothing wrong here. This seems to be a bug between Dashboard framework and CloudExport package where Dashboard's CSS overrides Chrome headless's landscape option.

We will find a fix for this issue. In the meantime you can use the following solution to cloud export Dashboard in landscape mode by using export view file and in page CSS like this:

//ChartBoard.php
                                Client::widget("LineChartDemo")
                                    ->exportToPDF("Chart - Revenue 2022", [
                                        'viewFile' => './pdf_views/LineChartDemo',
                                    ])

//./pdf_views/LineChartDemo.view.php
<style>
@page {
    size: landscape !important;
}
</style>
...

Let us know how this works for you. Rgds,

hung nguyen commented on Jan 16

Many thanks, Sebastian. I will try and let you know.

KoolReport's Forum

Chromeheadless PDF Export: How to switch Landscape and add Header Footer #3227

Build Your Excellent Data Report