This topic is locked

Guide 49 – Create PDF with charts created with AnyChart

1/25/2023 2:09:58 PM
PHPRunner Tips and Tricks
fhumanes author

With the standard functionality of PHPRunner to generate PDF, charts created with AnyChart (a product that PHPRunner uses to create charts) cannot be transferred to PDF and many users have asked about this functionality in the forum.

I have studied different alternatives and I have tried the jsPDF solution and I have managed to create the PDF page with the charts created with AnyChart.

Objective

Being able to generate a PDF file of any application page created with PHPRunner and more specifically, those DashBoard pages or not, which include graphics created by the AnyChart JavaScript library.

DEMO : https://fhumanes.com/map_anychart

Technical Solution

img alt
In the application that I had to explain how to create a dashboard page using DashBoard with snippet , I have extended it by adding a "PDF" button with the following code:

Snippet “js_PDF”:

$html = <<<EOT
<!-- html2canvas library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<!-- jsPDF library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script>
window.jsPDF = window.jspdf.jsPDF;

function Convert_HTML_To_PDF() {
html2canvas(document.querySelector(".r-topbar-page")).then(function (canvas) {
document.body.appendChild(canvas);
var imgdata = canvas.toDataURL("image/jpg");
var doc = new jspdf.jsPDF("l","pt","A2");
doc.addImage(imgdata, "JPG", 10, 10);
doc.save("sample.pdf");
});
}
</script>
EOT;
echo $html;

The example looks for the class that has the name “r-topbar-page”, which is in the DashBorad pages, but you can use any class reference of the page, since it generates the PDF of the whole page or of the part that be indicated.

The “PDF” button has the following code ( Client Before ):

Convert_HTML_To_PDF();

return false;

And that's it. It's that simple and applicable to any version of PHPRunner.

For any questions or queries, use my email fernandohumanes@gmail.com , to contact me.

This time I do not leave the project, since only the code expressed in this article is used.