KoolReport's Forum

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

Export with chromium headless #1674

Open Thomas opened this topic on on Oct 20, 2020 - 14 comments
Thomas commented on Oct 20, 2020

I am not satisfied with the results of phantomjs and would like to use chromium headless.

Unfortunately the instructions on your site weren't enough to make it work.(https://www.koolreport.com/docs/export/overview/#installation-node.js-and-chromium).

I installed Nodejs on our ubuntu server through the packet manager and I followed the instructions on the Topic #1658 (https://www.koolreport.com/forum/topics/1658) but the charts aren't there and the "ö,ä,ü" characters aren't displayed.

$report->run()
    ->export('MyReportMR')
    ->pdf(array(
        'nodeBinary'=>'/usr/bin/node',
        "format"=>"A4",
        "margin"=>array(
            "top"=>"1.25cm",
            "bottom"=>"1.25cm",
            "left"=>"2cm",
            "right"=>"2cm"
        ),
    ))
    ->toBrowser("MyReport.pdf", $show_in_browser);
Thomas commented on Oct 20, 2020

I've noticed, that if I don't set the "nodeBinary" the result is the same. What could I do to find the error?

Thomas commented on Oct 21, 2020

I thought maybe you need more information to be able to help me.

With only the chrome binaries ('chromeBinary'=>'/usr/bin/google-chrome',) the graphs are shown, but there are no options like landscape orientation and the special characters (äöü) are displayed wrong.

The something with line "await page.emulateMedia('screen');" in puppeteer-api.js is causing the error (seen in the picture). By commenting that line out, there are no charts shown.

I also tried it with the portable Nodejs version, but same results. Help would be much appreciated.

David Winterburn commented on Oct 21, 2020

Hi Thomas,

Please open the file koolreport/export/Handler.php and go to this part:

    if (is_string($nodeBinary)) {
        ...

Then set $config like this:

        $config = [
                "url" => "file://" . $tmpHtmlFile,
                "nodeBinary" => $nodeBinary,
                "chromeBinary" => $chromeBinary,
                "pdf" => $params,
                "goto" => [
                    "waitUntil" => "load", //'domcontentloaded', 'networkidle0', 'networkidle2'
                ]
            ];

If "waitUntil" => "load" doesn't work please try "waitUntil" => "networkidle2". Let us know the result. Thanks!

Thomas commented on Oct 21, 2020

Unfortunately it didn't change anything.

Thomas commented on Oct 21, 2020

Here is the content of $config. I guess the nodeBinary should be only "usr/bin/node" but the local Nodejs (/var/www/vhosts/motio.biz/bericht.motio.biz/vendor/koolreport/export/node-v12.19.0-linux-x64) has the same result.

David Winterburn commented on Oct 21, 2020

Ok, let's try other bruter approach. Please open the file koolreport/export/vendor/its404/php-puppeteer/src/js/puppeteer-api.js and replace the following line: 

      await page.goto(params.url, params.goto);

with this one: 

      await page.goto(params.url, { waitUntil: 'load', timeout: 600000 });

Again, if waitUntil: 'load' doesn't achieve the result you want please replace it with waitUntil: 'networkidle2'.

Thomas commented on Oct 21, 2020

Nope, still the same error. Let me know if you need additional information.

David Winterburn commented on Oct 21, 2020

Well, this is much more challenging and requires more tricks than I expected. Please follow this step:

  1. Open the file koolreport/core/src/ResourceManager.php and replace this line: 
        return $assetUrl;

with these ones:

        $protocol = isset($_SERVER['HTTPS']) && (strcasecmp($_SERVER['HTTPS'], 'on')===0 || $_SERVER['HTTPS']==1)
        || isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && strcasecmp($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https')===0 ? "https" : "http";
        $http_host = (!empty($_SERVER['HTTP_HOST']))?"$protocol://".$_SERVER['HTTP_HOST']:"http://localhost";
        $assetUrl = $http_host . $assetUrl;
        return $assetUrl;

This only guarantees KoolReport's resource files (css/js, etc) to be loaded correctly by headless chrome. If your page needs other third party resources to show my solution won't be able to help in those cases.

Thomas commented on Oct 21, 2020

Hey David, with with this solution the charts are shown but now I can't turn it to landscape mode.

How do I know if I set the binary path correct? With and without your solution it generates a pdf without the chromBinary and without a value for the nodeBinary ('nodeBinary'=>'',). Could that be the problem?

After I reinstalled puppeteer, I found that the emulateMedia function (await page.emulateMedia('screen');) in the puppeteer-api.js is was changed to page.emulateMediaType but not in the recent npm package (https://github.com/spatie/browsershot/pull/411).

Do you see an other solution how to fix it?

David Winterburn commented on Oct 22, 2020

Hi Thomas,

  1. For headless chrome to render pdf in landscape mode, please use this option:
    ->pdf(array(
        "nodeBinary" => $nodeBinary,
        "landscape" => true,
        ...
    ))

  1. If you export with neither chromeBinary nor nodeBinary then by default PhantomJS will be used.

  2. The current version of headless chrome replaces page.emulateMedia with page.emulateMediaType. Pleases either update php-puppeteer or change the file puppeteer-api.js.

Thomas commented on Oct 22, 2020

Hi David, thank you for the reply. You probably have to make sure but I did that everything already.

  1. "landscape" => true, - was and is set but doesn't work with the solution in the ResourceManager

  2. I understand that. But if I have the following configuration than it produces the same result. That's why I am asking if there could be the problem.

->pdf(array(
        "nodeBinary" => '',
        "landscape" => true,
        ...
    ))
  1. That was just an information for you and others. I have installed php-puppeteer it yesterday and updated the puppeteer-api.js
David Winterburn commented on Oct 22, 2020

Hi Thomas,

Please try to set "nodeBinary" to the correct binary nodejs file on your machine. For example in our case:

    ->pdf(array(
        ...
        "nodeBinary" => '/usr/bin/node',
        'landscape'=>true,
    ))

The pdf result is in landscape mode correctly. Let us know your result with this approach.

Thomas commented on Oct 22, 2020

Hallo David,

of course I've tried that and also the path to the portable version of node. I am always researching and trying different combination to find the error and only write if I don't see a plausible solution.

What I am trying to say is, that it doesn't matter what's behind "nodeBinary", the result is always the same. That's why I am asking if somewhere here could be the problem.

Thomas commented on Oct 22, 2020

Hallo David,

I went back to the php-puppeteer site (https://github.com/its404/php-puppeteer). In the Instruction it was said to install puppeteer globally:

sudo npm install --global --unsafe-perm puppeteer

In combination with the change to page.emulateMediaType and the solution in the ResourceManager, the report is now also in landscape.

Without the fix in the ResourceManager the problem with the "nodeBinary" still exists and there are still no charts and no styling in the tables.

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

Designed and built with by KoolPHP Inc.

Code licensed MIT.