Often I get the question if it’s possible to generate a PDF from a Sencha app. Well yes that’s possible, but not with Ext JS code only. Though, Ext JS has an exporter, to export grid/pivot data into an XML or Excel file, and you can export charts to images. Out of the box we can’t generate PDFs from full Sencha apps, with the framework.
- You can generate PDFs with Node and PhantomJS
- You can generate PDFs with PHP. For example with TCPDF, HTML2PDF, DOMPDF, Zend PDF or FPDF
- PDF generation for Java. For example: PDFBox, PDFJet, JPod or PDF Clown
- PDF generation for .NET. For example: PDFClown, PDFJet, Apose or Foxit
- Perl PDF generation, PDF-API, PDF-Create or PDF Template
- Headless website testing
Run functional tests with frameworks such as Jasmine, QUnit, Mocha, Capybara, WebDriver, and many others.
- Page automation & screenscraping
Access and manipulate webpages with the standard DOM API, or with usual libraries like jQuery.
- Network monitoring
Monitor page loading and export as standard HAR files. Automate performance analysis using YSlow and Jenkins
- Screen capturing
Programmatically capture web contents, including SVG and Canvas. Create web site screenshots with thumbnail preview etc
The last usecase, is where I am using it for. To let PhantomJS visit my Ext JS app, and capture the screen, by generating it to a PDF.
- Let’s say you have an environment with Node JS and a web server with Express installed, how can you make a PDF from an Ext JS app? I’m not an Node/PhantomJS expert, but I can show you some simple steps, which you can do too!
You will need to create a route that listens to an URL that should invoke PhantomJS. For example:
var PdfHelp = require('./libs/pdfgenerator-help');
- On your environment (dev and production), you will need to
install PhantomJs, you can install it via the npm
npm install phantomjs -s.
phantomjs scriptname.js from the
- I created a simple helper script which can listen to an argument that passes in a URL of my Sencha app. This probably doesn’t make much sense for your own app, but you will get the idea on how to do this.
I use a Node child process, to execute PhantomJS from my environment. It passes in two arguments; the phantomjs script to execute (generate.js - see below), and in my case the URL to the Sencha app.
var path = require('path');
- What’s important to know when working with PhantomJS
- I’m configuring the page, like paper size, margins, and headers and footers: http://phantomjs.org/api/webpage/property/paper-size.html
- Then I let PhantomJS open the URL to my Sencha app: http://phantomjs.org/api/webpage/method/open.html
- The big magic trick here, is that you’ll need to wait till the headless browser loaded the Sencha app with the framework completely in its memory. Otherwise you would print an empty page, (because index.html files in Sencha apps are usually pretty empty, since Ext JS generates the browser DOM elements).
Take a look into the
waitFor() method I used. The
first argument is a test function. This test function, (see line
94), tries to find the Ext namespace in my Sencha
app. When it’s there, I still don’t want to immediately make the
screenshot, because maybe my stores are not loaded yet. So I wrote
If there is data in my store, then go ahead and generate the PDF.
Again, this probably doesn’t make sense for your application, but you will get the idea.
You render the page with
page.render('my-pdf-name.pdf');and then you exit the phantomjs process (
Back into my PDF helper class, I wrote the following lines, to set the filename of the PDF and directly open it in my browser. It’s important that you set the page headers and content type to application/pdf:
var filename = "test.pdf";
And that’s it! As you can see when using PhantomJS for visiting your Sencha app, you might want to deal with the timing issues. As by default the index.html in a Sencha app is empty, and a Sencha app is generated in the DOM.
There are lots of ways on how you can create PDFs or images from Sencha apps. Which technologies and tricks did you use?
Ext JS 6.2 Premium, ships with a data exporter package for grids and pivot grids. It will be possible to export all the records which are visible in a grid to: XML, CSV, TSV, HTML and Excel format. Shikhir Singh, lately wrote a nice post about; how to extend from Ext.grid.plugin.Exporter to easily export to PDF.https://www.sencha.com/blog/exporting-data-from-an-ext-js-grid-to-pdf/