How to export html+css+javascript to PDF?

KoolReport
2 min readAug 28, 2017

--

“For a long time, I have looked for but did not find a good solution to export HTML embedded CSS and Javascript to PDF”John Marshall, one of our customers.

Fig 1: KoolReport converts HTML+CSS+JS to PDF

The problem of John is a common problem of developers working with PDF. We have worked with many PDF libraries such as TCPDF, FPDF, html2pdf or dompdf and we encounter some problems:

  1. It is not intuitive. If you use FPDF or TCPDF, you will feel quite difficult to write content, set style and position element with pure PHP code only. The Html2Pdf and DomPDF provide a better solution which is converting HTML to PDF but they have second problem.
  2. Low level of HTML/CSS support. This problem is associate with Html2Pdf and DomPdf. In those libraries, You should not use the latest HTML or CSS because they will not be rendered all correctly. Always be careful. Sometime the code breaks, things are not displayed in PDF and it takes a lot of time to debug and find a work around in lower level of HTML/CSS.
  3. Javascript is not supported. Uhh! All of them have this issue. Javascript now is the base of many chart libraries. Google Charts, Morris, D3, Sparkline, all of them are using Javascript to generate charts and graphs. So using pure HTML to PDF solution, we must forget all those beautiful charts.

So we was trying to find solution for above problems, a library that we can write PDF file easily with latest HTML/CSS combined with Javascript. And it is now all possible with Export package of KoolReport.

Some simple code to show

This is the view MyReport.view.php

<html>
<body style="margin: 1in">
<div class="page-header">My sample report</div>
<h1>Welcome to KoolReport</h1>
<div class="page-footer">{pageNum}</div>
<body>
</html>

This shows how to initiate KoolReport and export to PDF.

<?php
$report = new MyReport;
$report->run();
$report->export()->pdf()->saveAs("MyReport.pdf");

Additional features:

Beside the crucial features above, the Export package supports other necessary settings:

  1. Set page size with predefined size (A3, A4, Letter etc..) or any custom size in px
  2. Set page orientation (portrait or landscape)
  3. Set page margin
  4. Input repeated header text and footer text on each page
  5. Show page number as well as number of pages.

For more information on features and documentation, please visit Export Package.

More information

Export package is the excellent solution for exporting report to PDF and other formats. Not only can it be used for exporting report, it can help you to export any kind of html page to PDF with ease.

If you have any question regarding this package, do not hesitate to join our forum to get answer. We are happy to assist you.

❤ koolreport team

--

--

KoolReport

KoolReport is an intuitive and flexible Open Source PHP Reporting Framework for faster and easier report delivery.