Using Flex Build-in Print Function

The build-in print function provided by Adobe Flex is actually pretty straightforward. For a single page print, it is good enough. Here is how it works:

Things You Need

  • mx.printing.FlexPrintJob

Steps You Do

1. Create a FlexPrintJob Instance     
   var flexPrintJob: FlexPrintJob = new FlexPrintJob();

2. Start FlexPrintJob
   flexPrintJob.start();

3. Add Target Component to FlexPrintJob 
   printJob.addObject(targetComponent);

4. Print
   printJob.send();

Sample Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    initialize="init()">

    <mx:Script>
    	<![CDATA[
    	import mx.printing.FlexPrintJob;
    	import mx.collections.ArrayCollection;

    	[Bindable]
    	public var dataSource:ArrayCollection = new ArrayCollection();

        private var totalRecords:Number = 15; 

    	private function init():void {
		for (var i:int = 1; i<=totalRecords; i++) {
    		     var dataObject:Object = new Object();
    		     dataObject.Name = "Name #" + i;
    		     dataObject.Phone = "Phone #" + i;
    		     dataObject.Address = "Address #" + i;
    		     dataSource.addItem(dataObject);
    		}
    	}

    	private function doPrint():void {
    		var printJob:FlexPrintJob = new FlexPrintJob();
    	   	if (printJob.start()) {
    	            printJob.addObject(myData);
    		    printJob.send();
    		}
    	}

    	]]>
    </mx:Script>

    <mx:Panel title="Flex Tutorial - Print"
    	width="500" height="500"
    	horizontalCenter="0" verticalCenter="0"
    	horizontalAlign="center" verticalAlign="middle">

        <mx:DataGrid id="myData"
            dataProvider="{dataSource}"
            width="400" height="400" />

        <mx:Button label="Print" click="doPrint()"/>

    </mx:Panel>

</mx:Application>

Conclusion

Adobe Flex provides FlexPrintJob to handle the print request. It is very simple to use. However, the biggest challenge is printing multiple pages. In the above sample code, if you change the code,

From:

private var totalRecords:Number = 15;

To:

private var totalRecords:Number = 100;

It will generate 100 records in the DataGrid. Guess how many of them will be printed if you click the Print button?  Depends on your page and printer setting, maybe just 17-20. You will even see a ugly vertical scoll bar. The problem here is, FlexPrintJob itself can not SCOLL those Scollable Components like DataGrid or TextArea.

To resolve this problem, Adobe provides a workaround in Flex framework. In the next tutorial, we will see Printing Multiple Pages Using PrintDataGrid.

About Bryan
Bryan Li has more than 10 years business consulting and project development experience with major corporate clients including Sony, Bank of Montreal, Bruce Power, etc. As a fan and advocate for RIA(Rich Internet Application) technologies, Bryan helps companies and developers learn, design, and build richer applications using Adobe Flex.

4 Comments on Using Flex Build-in Print Function

  1. Tahir Alvi // October 30, 2009 at 2:33 am //

    How we can manage the multiple items(Images print in one page with specific height and width).

  2. Thanx it helped me a lot..

  3. How do i do to print in flex, without the appereance of the window that alllows me to sleect the printer?

    I wish it to print directly in the predetermined printer, not allowing selection.

    thank you
    agustina

  4. I’m facing an issue whenever I try printing from flex. It hangs my browser for around 30 seconds though the printing is successful. Any idea how to avoid it?

Leave a comment

Your email address will not be published.

*