Arcady Zherdev
31 October 2012

Exporting to PDF or PNG

Printing is one of the most commonly used features of a web based Gantt chart. The HTML print functionality previously […]

Printing is one of the most commonly used features of a web based Gantt chart. The HTML print functionality previously included in our Ext Gantt component only provided basic printing which wasn’t always enough. We therefore decided to add an additional way of printing your projects and tasks, by first exporting the content to a format which can be printed in high quality. With the recent addition of our `Export` plugin, you can now eaily create snapshots of your Gantt (or Scheduler) panel. Since there are different reasons for exporting we decided to add two export formats: PDF and PNG. The PDF format is supported on most computers, smartphones and tablets nowadays. It supports multi page view and it’s easy to read and print. Sometimes though, it’s preferable to have a PNG image, like when you just want to add it to a presentation.

Export options

The ‘Export’ plugin comes with a handful of options that allows you to customize the date range and the look of the output file. To make things even easier, these settings can be changed in the export dialog right before exporting.

The options can be divided into three groups: Date range, paper size and orientation.

The date range setting defines the time span to include in the exported Gantt chart. The dialog gives you three options :

The paper format option controls the size of the exported document by selecting one of the ISO paper formats from the combo box.

The orientation sets the orientation of the output file. It can be either `landscape` or `portrait`.

Setting up a backend for the plugin

The only “downside” to our new export solution, is that it requires a server side component which we’ve implemented in PHP. Additionally, the solution relies on PhantomJS to generate a high resolution PNG and ImageMagick to generate a high quality PDF. Please note, these products are not part of our SDK and have to be downloaded separately (links at the bottom of this blog post). Relying on server side components is a necessary evil, and it’s simply because the printing process is rather complicated. There is currently no reliable cross browser way of running it completely in the browser (if you know of one, please let us know :)). To help you use our new export solution, we’ve added a thorough guide on how to configure the PHP environment in the README file included in the PDF export example folder. Let’s look at a simple code snippet from the included export example.

export.js

The HTML and JS files are similar to the ones in the basic HTML print example. We have just added a button showing the `Export` plugin’s dialog :

    var g = Ext.create('Gnt.panel.Gantt', {
        ...,
        tbar : [
            {
                text : 'Export',
                handler : function() {
                    g.showExportDialog();           
                }
            }
        ],
        plugins: Ext.create('Sch.plugin.Export')
    });

When a user clicks this button, the `showExportDialog` function is called which opens the export dialog showing the options described above. Clicking the `Export` button inside the dialog starts the process. Behind the scenes the panel is resized to the size of selected paper format, and the proper number of columns/rows are generated to enable multi-page print. The content to print plus the settings are all sent in a single Ajax request to the server.php script for processing.

In the server script, we set the path to the `phantomjs` executable, and create a console command that will run PhantomJS passing the parameters chosen in the export dialog. PhantomJS generates a high resolution PNG for each page that we want to print. After it is done, the resulting PNG images are passed to ImageMagick, which merges the individual page PNG’s into a multi-page PDF or PNG file. If the operation is succesful, the script returns the path to the newly generated PDF/PNG file on the server.

When the PHP script is done processing it responds to the Gantt/Scheduler panel with its success status. If all went well, a new browser window is opened pointing to the URL of the newly generated PDF file. At this point, the job is done and we can finally print our Gantt chart in high resolution.

Summing it up…

We hope that you will be able to make good use of the new Export plugin and as always we’re hoping to hear your feedback on how we can improve it. Additional information about the configuration and setup of the environment can be found in the docs and the README file included in the export example folder. If you want to try it out right now, an online example can be found here.

References:

ImageMagick
PhantomJs

Arcady Zherdev

Product updates