Printing Multiple Pages using FlexReport
What is the problem
In the previous tutorial, we saw How to Print Multiple Pages Using Flex PrintDataGrid. It works fine when your application just contains one big DataGrid. In the real world, however, you often need a combination of contains and controls like VBox, HBox, Text, Image, plus DataGrid. Then guess what? You still have trouble with the Flex print job.
In fact, this is not the only challenge you are facing… How about the Print Preview function? Why do you need it? Because we are in recession! Oh, yeah, your boss would try to squeeze every penny for the sake of Cost Reduce. No one likes to see you print 100 pages then realize it is a wrong report. Plus saving paper is good for our mother earth.
Unfortunately, till Flex 3, Adobe has not provided a good solution to either Multiple Pages Printing or Print Preview (without client-side installation like PDF Printer).
FlexReport
As I mentioned before, my first Flex job was to find a better way to print multiple pages. So I did a lot of research on the 3rd party solutions. I was quite frustrated at that time. It seemed like everyone was focusing on Flex Layout, Animation, and Backend System Integration. Nobody cared about such a lower level job – Print. No wonder Adobe is not in hurry to provide a better support for Flex Print.
Finally, there was one open source project got my attention. It’s called FlexReport. After thoroughly reviewed its source code and demo application, I would have to say FlexReport is by far the closet solution to the Flex Print problem.
You can find the information about the FlexReport from the following URLs:
1. FlexReport Introduction http://www.kemelyon.com/bts/2008/01/14/flexreport/ 2. FlexReport Demo Application http://www.kemelyon.com/flexreport/0_2rc1/ 3. FlexReport Source File Download http://www.kemelyon.com/flexreport/srcview/FlexReport.zip Notes: If you counter any troubles to run the original FlexReport from the above link. You can Download My Working Version Here. I fixed some class reference problems and ran it fine in Flex 3.
How can FlexReport help you
The best way to see how much FlexReport can help you is to Try It. Download a copy and run it in your Flex Builder.
I found FlexReport was pretty cool in the following 3 areas:
1. Print preview Provides a nice preview by generating print pages through Bitmaps. Has a built-in PDF Printer, No extra software required to end users. 2. Report layout Creates dynamic reports without knowing how many pages in advance. 3. Multi-page text printing Except PrintDataGrid, adds a PrintText for long Text printing.
What is FlexReport missing
The biggest problem of FlexReport is: it assumes your Flex Components (Controls and Contains) are mainly Vertical-Stacked. For example, you have a TextArea at the top, then a DataGrid starting after the bottom of the TextArea, then an Image after the DataGrid.
However, many corporate forms are not like that, they usually mix Vertical and Horizontal Layout. For instance, you may have 3 Labels, 2 Text Areas, and 2 Images horizontal-aligned while other 2 DataGrids, 2 Texts, 3 Images vertical-aligned. FlexReport might give you some weird results in this case.
Conclusion
FlexReport is a nice solution to none-critical Flex printing jobs. It enhances Flex Print function in terms of Print Preview, Report Layout, and Multi-page Text Printing. However, FlexReport still has some issues to handle complex corporate reports especially with mixed Vertical and Horizontal Layout.
So, how can you further improve from FlexReport? To do so, you need to know some concepts and implementations of Flex Framework. This will be covered in our next tutorial – Understanding Flex Print Job from A to Z.


How did you workaround to build the complex corporate reports ? I am having difficulties in building a complex flex report.
Thanks in advance!
Hi Carol, Nice to see your comment on Flex Tutorial.
Just want to get a clarification about your question. Do you want to know:
How to build complex corporate reports on screen?
or
How to print complex corporate reports?
Hi Bryan,
Actually I will need both, on screen and on printer!
Thanks!
Hi Carol,
Both of them are not small topics, It is hard to give you a quick answer. It also depends on what specific layout your reports require.
Here are some quick tips for your consideration:
1. Just like any other web page designs, you need to first create big blocks then drill down to the small components (contains and controls).
2. Canvas, VBox, and HBox are your basic tools for layout. Any complex layout could eventually be built from those three.
3. Each component has its own width, height, startX, and startY. Those are very important for calculating dynamic position on both screen and printing.
Like what said, you might need to know some detail concepts and implementations of Flex Framework to resolve Layout and Print issues. My next tutorial – Understanding Flex Print from A to Z will cover some of those.
I will do some more research on the printing part of the Flex Framework.
Thanks again Bryan.
I am looking forward for your next tutorial.
Bryan,
As I am doing my research on flex and FlexReport I am having a little trouble with the code I downloaded from GoogleCode.
Which version are you using ?
I am having the following compilation error on the demonstration code:
Could not resolve to a component implementation. DemoReport.mxml flexreportdemo/templates/demo line 9 Flex Problem
Any suggestion ?
Thanks,
Hi, good post. I have been woondering about this issue,so thanks for posting. I’ll definitely be coming back to your site.
Thanks Carol for pointing out the issue with the original FlexReport file.
You can Download My Working Version from the following URL.
http://flextutorial.org/wp-content/uploads/2009/06/flexreportdemo.zip
I fixed some class reference problems and ran it fine in Flex 3.
Hi Bryan,
Thanks for the FlexReportDemo file.
I’ve done some coding and got everything working almost fine.
I have a question about the paperFormat. I’ve tried to change the paper format on my aplication, but it doesn’t seem to work. When I chage the paper format to anything but A4 all I can see is the thumbnail preview, the document itseft is blank.
Does this happens to you too ?
Thanks again!
Hi Bryan,
Sorry for my previous post, but I think I solved the issue!
Hi Carol,
I am glad to hear you have resolved the issue. Have fun!
Hi AndrewBoldman,
Thanks for your comment on flextutorial.org. I hope to see you often. If you have any suggestions, please feel free to let me know.
hi Bryan,
thanks for your tutorial .. its helpful for me.. i have download the flexreport and use it in my web application. I have some issues.
1. I want to take a print out of a invoice using flex report, that invoice contains address, date in top and some datas in grid and the “amount in words” and finally the signatures.. i want all things in a grid format to print… but for address and data i need only two columns and price details i need 6 columns and for “amount in words” i need only one column. Is it possible with flex report…
I am struggling lot to prepare this. i am in a need of your help.. pls give me some ideas and sample code..
Thanks in advance!
Hi Baskar,
Thanks for your comment on FlexTutorial.org!
It seems like you have a quite complex invoice to print. As I experimented before, FlexReport was good to handle the components stacked vertically. It might have some difficulties to deal with the mixed layout (Horizontal and Vertical display objects nested to each other).
On the other side, the standard PrintDataGrid from Adobe prints each line with the same height. Therefore, it might be hard for you to push different elements into one Grid.
One way to handle this issue is to carefully build your report using just VBox and HBox (instead of Grid). It will look fine on the screen, but once you print it, there are some adjustments need to be done.
I am working on my final tutorial (Understanding Flex Print from A-Z) of this Flex Print Series. Hopefully you will get some hints from it.
Hi Bryan,
Thanks for your quick reply. Actually i didn’t know how to build report using VBox and HBox. Is it possible for you to give some samples or ideas.
Thanks in advance.
Hi Bryan,
I am having one more doubt, the export pdf button in flexreport uses create.php. Actually my client’s machine is a very low end machine … so i cant install php in tat machine. Is there any alternative to export the report into pdf.
Hi Baskar,
Basically, there are two ways to to print a report as a PDF file:
Option 1. Call a outside program (can be written in PHP, Java, or .NET) through HTTP to generate PDF file.
Option 2. Install a Free PDF Writer software (e.g PrimoPDF, http://www.primopdf.com/) on the client machine. So a use can choose PDF Printer when print a report.
ok bryan,
how to build report using HBox and VBox. Latest flexreport contains ReportDataGrid, PrintTextArea only..
Hi Baskar,
VBox and HBox are the base containers you could use to build a complex report. Just like any other web page designs, you need to first create big blocks(VBox, HBox, Canvas) then drill down to the small components(Controls).
FlexReport does not support nested VBox and HBox well enough. So, in the demo, you only see limited components (e.g. PrintDataGrid and PrintTextArea) and they are stacked vertically.
In my next Flex Print tutorial, I will cover how to create a print solution beyond FlexReport. It will give a better support to a complex report built by HBox and VBox.
Bryan,
I’ve just come across your post and FlexReport, after, as you say searching Google for hours.
NIce work, just what I needed as I have a very very complex print requirement for Multiple Order Form types with user-configured output options. The client has set a tall standard, and your component is a wonderful addition to my thinking on an approach.
I look forward to your future posts.
Thanks Steveo for your feedback! I’m glad to know you get something helpful from FlexTutorial.org.
hi Bryan,
I can able to use flex repot with VBox and HBox and PrintTextArea.. And i want to place the contents into grid at runtime.. is it possible by using HBox, VBox and PrintTextArea.
My idea:
My grid contains 7 columns so that i can Use one HBox as a container and 7 VBox as childs of HBox and one PrintTextArea in each VBox and i have only one Big row in my grid.
Did the above concept work for my requirement.
Do have any idea means pls share with me.
thanks in advance
Hi Baskar,
Yes, you can build a grid with VBox and HBox. You usually do it like this:
aVBox.addChild(componentView);
componentView is the child component.
You can use the BindingUtils to bind the data at runtime for the child component as below:
BindingUtils.bindSetter(onDataChanged, this, “bindData”);
Hopefully this helps.
Hi Bryan.
As eluded to in my first post, I’m using a ‘factory’ method to construct a series of components into a printable template format prior to being viewed by the FlexReport component. Each ‘screen’ component has a ‘print’ version that makes it all print friendly and allows for a common data provider etc.
The preview looks fine, but for some reason the pdf output is chopped on the right hade side of the page; has that been your experience with alivepdf? (I’ve also upgraded the current source aspects for alivepdf to the current version – 1.4.9)
TIA
Steve
Hi Bryan,
I have partially completed my invoice and thanks for your link for the PrimoPDF tool. I used HBox, VBox and PrintTextArea, but the Preview is not working man. I used DemoReportDP.as constructor to pass data from my screen and get tat data in “public override function loadData() : void” of DemoReport.mxml.
Can you have solution to make the Preview to work.
Thanks in advance..
Hi,
I’ve got a problem in that I have a very wide DataGrid (30 columns and I can only get 5 columns per page in landscape). Flex doesn’t seem to be able to print when there are multiple columns. The ‘multipage’ capabilities seems to only work when you have multiple rows which need to print on another page, not columns.
Would you know if FlexReport can cope with that – or any other solution pls ?
Tks
Alex
Hi Alex,
When you use FlexPrintJob to print, you can specify the ScaleType (matchWidth, matchHeight, fillPage, showAll).
In Adobe Flex 3 document, it says:
MATCH_WIDTH
(Default) Scales the object to fill the available page width. If the resulting object height exceeds the page height, the output spans multiple pages.
MATCH_HEIGHT
Scales the object to fill the available page height. If the resulting object width exceeds the page width, the output spans multiple pages.
SHOW_ALL
Scales the object to fit on a single page, filling one dimension; that is, it selects the smaller of the MATCH_WIDTH or MATCH_HEIGHT scale types.
FILL_PAGE
Scales the object to fill at least one page completely; that is, it selects the larger of the MATCH_WIDTH or MATCH_HEIGHT scale types.
NONE
Does not scale the output. The printed page has the same dimensions as the object on the screen. If the object height, width, or both dimensions exceed the page width or height, the output spans multiple pages.
MATCH_WIDTH should be fine in your case. What it does is to calculate the ratio based your object width and printer max page width. Then apply this ratio to fit the object to the print page.
Hi Baskar,
Thanks for your feedback. I’d like to have a bit more information on your issue. Does it mean you see a blank screen when doing the preview? If you run debug, would you be able to see anything wrong before the preview, like null object?
Hi Steveo,
About the PDF print, if you try PrimoPDF on the client side rather than AlivePdf, would you get the same result?
Hi Bryan,
Now preview is working. The issue with my application, i resolved tat. But the preview is not tat much clear when i use fontsize 8(while use Zoom button also). I used 7 VBox inside a HBox. And one PrintTextArea in each VBox. But there is always some space between each VBox. I want to remove those spaces, becoz i have to draw a horizontal line at the end of last three VBoxs. Do you have any idea for this.
Thanks in advance.
Hi Bryan,
I have one more question about Flex Report. I just tried to generate a report on IE and there is only a blank page! Is there any adobe reader versions issues ?
Thanks
Hi Bryan,
So I figured out what is going on with my linux x windows problem. But I don’t know how to fix it.
When I use on the windows client all fonts on the preview comes in white color, when I send to the printer it all prints ok.
When I use on the Linux client it seems normal on the preview and on printing.
Have you ever seen something like this!?
Can you help me!?
Thanks!!
Hi everyone!!
first of all im a little new in flex and now im programing my first air aplication but im in trouble, print content.
The issue is i hace an HTML component and it fills dinamic when it content is to large in height and put scrollbar the flexprintjob dont print it all, only the visual content of the scrollbar position, i find this tool but i can’t understand how to use it if any of you know where i can find a tutorial or somethin usefull please help me!!! im working with flex 3
Hi Ever One!
I find a problem when i export the Page to PDF, then in PDF pages some text from Right side is cutting.
Please can any one help me
Regards
Tanzeem Akhtar Bhatti
Software Engineer
Rich Applications Consulting (pvt) ltd.
Hi i solve my problem but i don’t know if it can help you, my isue was i have a html component with some text from SQLite database to print but flex 3 dosen’t have a good support for that, and without time to use alivepdf i solve to create a html page in air and i put in the head tag a javascript function i called in body onload to print, it’s a no clean solution but funtional if it can help you send me and email to igil@corefix.com.mx
Hi, thanks a lot for your examples. They are helping me a lot because I have to do a complex print for a flex application. But I have a problem: when I tested your project ( http://flextutorial.org/wp-content/uploads/2009/06/flexreportdemo.zip ) I receive empty pages in the PDF (it looks like: first page ok, then the next has only one line; third page ok (which should have bine the second) and next one has only a header…; six page ok and then an empty page. Do I have some settings to make in the project (like constants values)? I hope you can help me
. Thanks
Hello Guys,
Did anyone had any problems using linux or windows. When I print my Report on Linux machine everythning works fine, but when I use a Windows OS I only get a blank page. Seems like the font is white.
Any tips!?
Thanks,
Hi Bryan,
I was wondering if you have discovered a way to automatically set the orientation to landscape when printing a datagrid?
Regards,
Paul
Very nice
you are catches my heart after reading this tutorial.
Thanks
nice and helpful site…
wow, I was so hopeful but when I printed from the demo, sure enough the formatting was f***ed. came out with just a little cut off on the next page and such.
For those playing with the FlexReport and found problems with cutoff pages or pages bleeding off onto the next page, check which PaperFormat you are using. The demo uses A4 paper size which, if you are in the USA, isn’t going to work for most of us. You’ll want to switch to LETTER size. Now you’ll have a problem with switching format because there is a bug in the code and you will get an “error: #2030″. For a fix, take a look at the bottom of this page…
http://old.nabble.com/-flex_india:21830–Change-PaperFormat-in-FlexReport-td23224041.html
It is a simple matter of updating the original code to make this fix more generic so you don’t have to include the “fix” in each project.
Hope this helps someone… =)
Hi Bryan,
Thanks for this wonderful article.
We are trying to integrate the FlexReport in our application as it meets full of our requirements.
One of our requirement is to print the images in multiple pages. We have a series of images and we need to get it printed in multiple pages, but only first page is coming. Can you please help us on this?
Many Thanks!
I had the same problem with pages being cut off on the sides, but only in the generated PDF.
I fixed it by changing
public static const PAGE_SCALE:Number = 1.25;
to
public static const PAGE_SCALE:Number = 1;
in org.doc.Document
Hi Bryan,
Its been only 3 days i have started flex.I found this post very useful. I have tried to load the data for DemoReport.mxml using HTTPService from the server but not succeed.
Could you please help me get the solution.
Thanks
Subin
hi Bryan,
it’s possible to print the datagrid in horizontal?
thanks
Angelo
Hi Bryan,
There is a problem of cutting the footer and printed in next blank page while printing. Can you tell me how can i fix the problem.
Please help me
.
Thanks Subin
Hi,
FlexReport is great but I get a strange error.
I tryed out the demo app and after clicking “Export to pdf” I get the following pdf:
http://vampire.rulez.org/flexreport/Flex%20Report%20Demo.pdf
It looks that the page is zoomed and the content is clipped at the right side.
Has the problem something to do with the page width?
Has anyone some intentions on it?
Thanks, Cheers.
Problem already solved.
http://flextutorial.org/2009/06/02/printing-multiple-pages-using-flexreport/comment-page-1/#comment-1407
Pim says:
April 19, 2010 at 8:39 am
I had the same problem with pages being cut off on the sides, but only in the generated PDF.
I fixed it by changing
public static const PAGE_SCALE:Number = 1.25;
to
public static const PAGE_SCALE:Number = 1;
in org.doc.Document
Does anyone have experience customizing the Flexicious print options? http://www.flexicious.dom/Home/Demo.
I have considering this product, but dont know how easy it is to customize.