ChromeHeadless.io

Overview #

ChomeHeadless.io is an online service helps to convert HTML to PDF and other image format. Running on highly optimized hardware and software, the ChomeHeadless.io will save your time in installing headless browsers like Phantomjs or Google Chrome. It also saves you server resources which you may reserve for other crucial tasks. The Chromeheadless.io is in beta version so all are free.

Get Token Key #

  1. Register an account in ChromeHeadless.io. An email with title "Welcome to ChromeHeadless.io" will be sent to you in few minutes after your sign up.
  2. Use account credential in welcome email to log in our system.
  3. Go to tokens management page
  4. Hit Generate button to generate token key.

Example #

MyReport.php

class MyReport extends \koolreport\KoolReport
{
    //Register cloud export service in your report
    use \koolreport\cloudexport\Exportable;
}

MyReportPDF.view.php

<html>
    <body>
        <h1>This is my first export using Chromeheadless.io</h1>
        <p>Chromeheadless.io save your time and resources in exporting html, report to PDF.</p>
    </body>
</html>

index.php

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

$report = new MyReport;
$report->run()
->cloudExport("MyReportPDF")
->chromeHeadlessio("token-key")
->pdf()
->toBrowser("myreport.pdf");

Export engines #

ChromeHeadless.io has two pdf export engines which are headless chrome and wkhtmltopdf. Here's an example to use either of them:

$report->run()
->cloudExport("MyReportPDF")
->chromeHeadlessio("token-key")
->pdf($chromePDFOptions)
->toBrowser("myreport.pdf");

$report->run()
->cloudExport("MyReportPDF")
->khtml("token-key")
->pdf($khtmlPDFOption)
->toBrowser("myreport.pdf");

Headless chrome has more features but wkhtmltopdf is faster for big files.

Extra settings #

You may add some extra settings to guide ChromeHeadless.io to load your page.

$report->run()
->cloudExport("MyReportPDF")
->chromeHeadlessio("token-key")
->settings([
    "pageWaiting"=>"load", // load, domcontentloaded, networkidle0, networkidle2
    "useLocalTempFolder" => true,
    "autoDeleteLocalTempFile" => true,
    "serviceHost" => "http://localhost:8000", // default value: https://service.chromeheadless.io
    "serviceUrl" => "http://localhost:8000/api/export",
])
->pdf($chromePDFOptions)
->toBrowser("myreport.pdf");
NameTypeDefaultDescriptionAvailable since version
pageWaitingstring"load"When to consider navigation succeeded. Other options are "domcontentloaded" page finished when all DOM is loaded; "networkidle0" page finished when there are no more than 0 network connections for at least 500 ms; "networkidle2" page finished when there are no more than 2 network connections for at least 500 ms.1.0.0
useLocalTempFolderbooleanfalseUse/create a local temporary directory instead of system temporary directory to store temporary export files1.0.0
autoDeleteLocalTempFilebooleanfalseAuto delete temporary export files after exporting1.0.0
serviceHoststringhttps://service.chromeheadless.ioChoose KoolReport's cloud server or your local export server4.0.0
serviceUrlstring{serviceHost}/api/exportTo be used if you want another export route other than /api/export4.0.0

Export options #

PDF for headless chrome engine #

The pdf() method will help to generate pdf file. It takes an array as parameter defining options for your PDF. Below are available options.

NameTypeDefaultDescription
scalenumber1Scale of the webpage rendering. Defaults to 1. Scale amount must be between 0.1 and 2
displayHeaderFooterboolfalseDisplay header and footer.
headerTemplatestringHTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them: pageNumber current page number; totalPages total pages in the document;
footerTemplatestringHTML template for the print footer. Should use the same format as the headerTemplate
printBackgroundboolfalsePrint background graphics.
landscapeboolfalsePaper orientation.
pageRangesstringPaper ranges to print, e.g., '1-5, 8, 11-13'. Defaults to the empty string, which means print all pages.
formatstringPaper format. If set, takes priority over width or height options. Defaults to 'Letter'.
widthstring/numberPaper width, accepts values labeled with units.
heightstring/numberPaper height, accepts values labeled with units.
marginobjectPaper margins, defaults to none. It has 4 sub properties: top, right, bottom, left which can take number or string with units

Example:

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

PDF for wkhtmltopdf engine #

All options could be found at this link, section Global Options Wkhtmltopdf Docs

Example:

...
->pdf([
    "--collate"=>true,
    "--page-size"=>"A4",
    "--orientation"=>"Landscape",
    "--margin-top"=>"100px"
])
...

PDF options in view file for both headless chrome and wkhtmltopdf engines #

Some pdf options could be set directly in the PDF view file instead of pdf() method.

In the view file, use header and footer tags to set pdf's header and footer template:

Example:

<!-- Headless chrome pdf template -->
<header>
    <div id="header-template" 
        style="font-size:10px !important; color:#808080; padding-left:10px">
        <span>Header: </span>
        {date}
        {title}
        {url}
        {pageNumber}
        {totalPages}
        <span id='pageNum' class="pageNumber"></span>
        <img src='http://www.chromium.org/_/rsrc/1438879449147/config/customLogo.gif?revision=3' />
    </div>
</header>
<footer>
...
</footer>

Headless chrome: If either header or footer tag exists, pdf options' displayHeaderFooter will be true. PDF options' headerTemplate and footerTemplate options take priority over view file's header and footer tags. With header and footer tags, if there's no font-size style, a default style "font-size:10x" is used. Header and footer tags supports place holders like {date}, {title}, etc and img tag with link-type src. For img tag pdf options' headerTemplate and footerTemplate only support base64-type src.

<!-- Wkhtmltopdf pdf template -->
<header>
    <div>
        {page}{frompage}{topage}{webpage}{section}{subsection}{date}{isodate}{time}{title}{doctitle}{sitepage}{sitepages}
    </div>
</header>
<footer>
...
</footer>

Wkhtmltopdf: The exact html content of the header and footer tags including img tags will be used as pdf header and footer with some substituted variables.

margin #

In the view file, use the body tag's margin style to set pdf margin:

Example:

//MyReportPDF.view.php
<body style='margin: 1in 0.5in 1in 0.5in'>
...
</body>

If either header or footer tag exists but there's no body's margin top or bottom, a default margin top or bottom of 1 inch will be used

No template option #

If you don't have any header/footer/margin in your template files, you could speed up pdf generating with noTemplateOption property:

...
->pdf([
    "noTemplateOption"=>true,
    ...
])
...

JPG for headless chrome #

The jpg() help to generate JPG file. It take an array as parameter defining options for your JPG. Below are list of properties:

NameTypeDefaultDescription
qualitynumberThe quality of the image, between 0-100.
fullPageboolfalseWhen true, takes a screenshot of the full scrollable page.
clipobjectAn object which specifies clipping region of the page. Should have the following fields: x is the x-coordinate of top-left corner of clip area, y is y-coordinate of top-left corner of clip area, width is the width of clipping area and height is the height of clipping area.
omitBackgroundboolfalseHides default white background and allows capturing screenshots with transparency.
encodingstring"binary"The encoding of the image, can be either base64 or binary

Example:

...
->jpg([
    "quality"=>80
    "clip"=>[
        "x"=>100,
        "y"=>100,
        "width"=>500,
        "height"=>1000,
    ]
])
...

PNG for headless chrome #

The png() help to generate PNG file. It take an array as parameter defining options for your PNG. Below are list of properties:

NameTypeDefaultDescription
fullPageboolfalseWhen true, takes a screenshot of the full scrollable page.
clipobjectAn object which specifies clipping region of the page. Should have the following fields: x is the x-coordinate of top-left corner of clip area, y is y-coordinate of top-left corner of clip area, width is the width of clipping area and height is the height of clipping area.
omitBackgroundboolfalseHides default white background and allows capturing screenshots with transparency.
encodingstring"binary"The encoding of the image, can be either base64 or binary

Example:

...
->png([
    "clip"=>[
        "x"=>100,
        "y"=>100,
        "width"=>500,
        "height"=>1000,
    ]
])
...

Get results #

In all above examples we use method toBrowser() to send the file to browser for user to download. Here are all options:

MethodReturnDescription
toBrowser($filename,$openOnBrowser)Force user to download file or open the file on browser if $openOnBrowser is set to true
toString()stringReturn filename as string
toBase64()stringReturn content of file in base64
saveAs($path)Save the file to specific location

Examples:

$report->run()
->cloudExport("MyReportPDF")
->chromeHeadlessio("token-key")
->pdf()
->saveAs("../stores/myreport.pdf");

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.