How to Export Your Report with Html+Css+Javascript to PDF?
May 17, 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:
- 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.
- 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.
- 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");
Working example
Let example speaks for itself. Below is a working example of exporting a HTML page with embedded Google Charts.
Additional features:
Beside the crucial features above, the Export package supports other necessary settings:
- Set page size with predefined size (A3, A4, Letter etc..) or any custom size in
px
- Set page orientation (portrait or landscape)
- Set page margin
- Input repeated header text and footer text on each page
- Show page number as well as number of pages.
For more information on features and documentation, please visit Export Package.
Summary
Export package is an 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. The price of package is low compared to the benefits it brings to you.
If you have any question regarding this package, do not hesitate to join our forum to get answer. We are happy to assist you.
<3 koolreport team