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.
Table of Contents
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.
Name |
License |
Languages Officially Supported |
Creators |
iText | AGPL and Commercial | .NET & Java | iText |
PDF Clown | LGPL | .NET & Java | PdfClown.org |
PDFJet | BSD and Commercial | .NET & Java | Innovatics Inc. |
Boxable (PDFBox) | Apache 2 | Java | Open Source / GitHub |
FPDF | Permissive | PHP | Open Source / FPDF.org |
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.
Name |
License |
Creator |
PDF.js | Apache | Mozilla |
jsPDF | MIT | Parallax |
pdfmake | MIT | Open Source / GitHub |
PDFKit | MIT | Open Source / GitHub |
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.
Nice article Shikhir!
However I am a fan to have such export operations to be performed on the server-side. But this is cool. I have had used couple of libraries mentioned above, some are new to me. I will try them soon.
Thanks
Shreeraj
Hi,
Nice article Shikhir!
Please let me know if this plugin, PDF Exporter for ExtJS 6 grid, can export to PDF also the images from a template column of the grid.
Thanks.
Yes, it should work, but not out of the box. The pdf creation capabilities is only limited by the pdfmake library which was used. The pdfmake library does have image insertion features. You will need to modify the saveDocumentAs function in the plugin to save the appropriate column as an image. If the pdf with images is taking a long time to save, you may wish to add a progress bar to save. I don’t know how multiple image insertion will affect the performance of pdfmake library. I suspect it will all depend on the size of your data.
Great article. I have been using Grid Printer plugin for a while now, and might consider this approach for PDF export. However, my requirement is slightly more than just exporting the grid. Think of this as taking the exported output to a management meeting, the data would be meaningless to them unless I tell them its stats for this month, last month, for a year, for United States, for New Zealand, etc etc…
I mean, on top of the grid, I have a few controls say labels always (report criteria selected by user for data on grid),
Can this be exported out as well? That would complete the printed output and give it more meaning.
Appreciate your thoughts on this. Or alternatives (if any).
Thanks
Yes. This is doable. If you want to do this client side, you will need to modify the saveDocumentAs function (see link in blog). You should easily be able to add logos, images, and other summary/statistical data from outside the grid too.
Hi, thank you for the great article!
Can I suggest an update for the sample application including an extension of “Ext.exporter.Base” instead of the grid exporter plugin. The code will be quite the same, you only need to implement “getContent” and “saveAs” methods with the code actually in “saveDocumentAs”.
This way the pdf exporter will be added to exporters set instead to replace the whole exporter plugin.
Thanks for your suggestion. This is a great recommendation.
I will accept your github pull request after I have had a chance to test.
Hi, thanks for this cool post. However when I try to run the sample, nothing does come up. The Chrome console shows a TypeError… Any chance to get this back to life?
Thanks, Ingo
I just tried it in Chrome, Chromium, Safari and Firefox and it works great. Maybe some sort of adblocker or another plugin preventing the download?
https://rawgit.com/shikhirsingh/ExtJS-Grid-PDF-Exporter/master/build/index.html
Hi,Shikhir
Nice article!
I found this failed in 6.2.1 but I got it working. Have to code if you want it.
I meant .. I have the code if you want it.
Also. wondering how to go about formatting a date column?
Hi Roger!
Glad that you have it working for 6.2.1! Please submit the Pull Request. For the date column formatting, I would need some elaboration on the scenario so that I can understand better.