Exporting Data from an Ext JS Grid to PDF

Ext JS developers absolutely love the Grid Component because of its comprehensive set of features. When we demonstrated those features at recent Sencha events, many developers were surprised to learn that a JavaScript Excel exporter plugin is available as part of Ext JS Premium (see the Ext JS Kitchen Sink demo).

JS Grid provides a High-Performance Robust Grid for Your Most Data-Intensive Input and Data Export Capabilities, including csv, tsv, html, pdf, and xls file types.

Taking it a step further, developers wanted to know how to export the data in a Grid to a PDF file format, so the Grid data could easily be printed. Although Ext JS does not have a JavaScript PDF Exporter plugin, it’s still possible to export the Grid data using third-party libraries on the client-side or the server-side. The good news is that if you choose to use a client-side JavaScript library, the code is simple and I’ve provided it below. However, you do need to be aware of the considerations and limitations of both approaches. Exporting data in the Grid to create a PDF file is a lot more complicated than simply exporting a file in Excel format. This is due to feature limitations inherent in a paper format because of size restrictions. As a result, there are both formatting and technology considerations that need to be addressed.

Formatting Considerations

First, developers need to determine that the correct page size is being used, based on country defaults. For example, the most common paper size in the USA is Letter (8.5 x 11 inches), but in the UK it is A4 (8.27 x 11.69 inches).

Second, developers need to ensure that having a large number of columns does not lead to column truncation due to page width limitations. While it’s possible to create hundreds of columns using Ext JS Grid, fitting it on paper for export is another matter. You may be able to squeeze in a few more columns if you rotate the orientation of the page to landscape for the export process.

Third, developers need to define the correct size for columns and the data they contain. This may impact the number of columns that can fit on a page. You need to be very careful using auto or wildcard for column sizes.

Fourth, developers need to consider the font and color styling of headers, table headers, page numbers, and logos. As it’s likely the PDF is going to be printed, do not assume that everyone is using a color printer.

Technology Considerations – Server Side or in the Browser?

The data set size and browser support requirements of your application are two factors that impact your choice in the type of technology used to generate the PDF.

If the data set is large, there are a couple of reasons it doesn’t make a lot of sense to transmit the entire data set to the client, so a PDF can be created in the browser. First, the server can typically create a PDF file much more efficiently than a browser that uses JavaScript because the lower-level languages typically used on servers are significantly faster. Second, it’s not efficient to transmit the entire data set to the client because the server already has the data set and also has the ability to efficiently create the PDF.

If the client has a small amount of data in the Ext JS Store, then the client can easily create a PDF using a third-party JavaScript PDF library. However, if a BufferedStore is used (for components such as Infinite Scroll Grid), then the PDF should be created on the server-side because the BufferedStore only has a portion of the entire data set.

Unfortunately, most JavaScript PDF libraries have poor support for browsers older than Internet Explorer 11 and older versions of Safari. Older versions of Internet Explorer and Safari don’t have a problem generating the PDF, but they do have problems saving it to disk. Workarounds include using Flash plugins such as Downloadify to save the file or opening the PDF file via the browser instead of saving the PDF file to disk.

Implementation of Server-Side Technologies

There are dozens of PDF generating libraries available if you are using .NET or Java. Bindings for some of these libraries are available for other server-side languages as well. However, not all of these libraries support the creation of tables. Because we are discussing exporting tabular data, I have created a short list below of PDF generating libraries that have rich table creation capabilities. Not surprisingly, the commercial libraries such as iText have a richer feature set than their permissive open source alternatives.

Implementation of JavaScript Client-Side Technologies

Unfortunately, the options for PDF generation via JavaScript are far fewer. Here is a list of four libraries that have gained traction.

One of the the big advantages of using a JavaScript PDF library is it that it’s very easy to integrate with the existing Ext JS Grid exporter plugin. All you need to do is subclass Ext.grid.plugin.Exporter and override the getExporter and saveDocumentAs functions to save the data from the Grid to the PDF instead of the Excel file. I have created a sample application that populates a collection of stocks, which are listed on the New York Stock Exchange, into a Grid. Users have the ability to export the data in the Grid to a PDF file. The pdfmake library was chosen due to its rich table creation capabilities. The code to override the saveDocumentAs function is surprisingly short and simple. You can see a demo of the application running.

The Ext JS short-term roadmap has enhancements that will allow you to export your Grid data to more file formats (you should continue to use the solution above for PDF). Keep an eye on the blog and release notes for updates. If you use a PDF generation library other than the ones I’ve listed above, please share your thoughts in the comments below.