The Secret to Printing in Flex

My last Flex project had an emphasis on printing. Printing in Flex can be a difficult beast, but I've managed to tame it with a few simple steps.

First, Lin Lin's tips for printing in Flex are a must read. A lot of what I'm going to say builds off of Lin's advice.

Most of the printing that had to be done in the application involved summary reports. The users had the ability to view summaries in a popup window. These popup window's were TitleWindows that were opened via PopUpManager. Generally, the windows contained a ControlBar with a "Print" and an "OK" button, and had a container with a VScrollBar that displayed the summary information.

Essentially, there were 2 main problems I ran into. First, the content of the container was masked and only the content visible in the popup window was printed (whatever the user was looking at when they clicked print was printed). This was a big problem as the print button needed to print the entire summary regardless of what the user could see via the VScrollBar. Second, there was a gray background that refused to go away no matter what I tried.

The masking problem was fixed with the clipContent property. However, this wasn't straightforward - I had to wrap clipContent in a doLater before printing in order for the change to take effect before the print dialog was displayed. After the print completed, the clipContent property was restored. Here's some sample code:

// Event Handler - called when the print button is clicked
private function onPrintClick ():Void
{
	// Remove the clipping so all of the content is printed
	clipForPrinting( true );
	
	// Start the delay to allow clipping to update before
	// printing anything.
	doLater( this, "doActualPrinting" );
}

// Adjust the clipping to prepare for or recover from print.
private function clipForPrinting( printing:Boolean ):Void
{
	// Assume printing is true if not passed in
	if ( printing == undefined ) {
		printing = true;	
	}

	// Modify the root clipContent so the application's width/height
	// doesn't interfere with bounds of the print content
	Application.application.clipContent = !printing;
		
	// Modify the container holding the content to be printed to remove
	// the scroll masking 
	printArea.clipContent = !printing;
		
}

// Handles the actual printing of the content in the popup
private function doActualPrinting():Void
{
	var printJob:PrintJob = new PrintJob();
	// Keep track of # of pages - only print if there are pages to print
	var pageCount:Number = 0;

	// Show the print dialog
	if ( printJob.start() ) {
		// The user has opted to print - add the pages that
		// need to be printed
		pageCount += PrintUtil.pagenate( printArea, printJob );

		// Send the content to the printer
		if ( pageCount > 0 ) {
			printJob.send();
		}
	}

	// Explicitly delete the printJob
	delete printJob;

	// Fix clipping now that print is done
	clipForPrinting( false );
}

PrintUtil is a class I created to help in splitting up MovieClip's into multiple pages. Essentially, the pagenate method figures out bounds for each page and adds those pages to the printJob passed in via the addPage method, passing in a bounds object. The bounds object contains xMin, xMax, yMin, and yMax properties. After all of the pages have been created, the number of pages successfully added (based on the return value of addPage) is returned.

Solving the gray background color problem turned out to be pretty trivial. A few backgroundColor="#FFFFFF" attributes added to the containers that the print content was in did the trick. This was a bit of trial and error until I found which containers needed the explicitly set white background color.

Taming the printing beast can be tricky, but armed with the above knowledge it should be easier for you. Good luck!