My Print Preview and Print

MattWilliams — Sun, 12 Dec 2021 04:58:07 GMT

I was trying to find a way to create a print preview before going directly to the print dialog and really couldn't find anything from the samples or from the forums. I thought I would post my script just in case someone else would find some use out of it and/or make improvements.

<!-- Print preview code -->
 <mx:Script>
  <![CDATA[
   import mx.core.IUIComponent;
      import mx.graphics.ImageSnapshot;
      
      private function takeSnapshot(source:IBitmapDrawable):void {
                var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(source);
                var imageByteArray:ByteArray = imageSnap.data as ByteArray;
                
                swfLoader.load(imageByteArray);
                printPanel.visible = true;
                printAppBar.visible = true;
                printBackground.visible = true;
               }
             
  ]]>
 </mx:Script>
 
 <!-- Print for real  (from ESRI FLEX samples) -->
 
 <mx:Script>
        <![CDATA[
            import mx.printing.FlexPrintJobScaleType;
            import mx.printing.FlexPrintJob;
            import mx.controls.Alert;

            private function doPrint(myFlexPrintJobScaleType:String):void
            {
                // Create an instance of the FlexPrintJob class.
                var myPrintJob:FlexPrintJob = new FlexPrintJob();

                // Start the print job.
                if (myPrintJob.start())
                {
                    try
                    {
                        // hide the zoom slider so it won't be printed
                        myMap.zoomSliderVisible = false;

                        // Add the panel to print.
                        myPrintJob.addObject(printPanel, myFlexPrintJobScaleType);

                        // turn the zoom slider back on
                        myMap.zoomSliderVisible = true;
                    }
                    catch (error:Error)
                    {
                        Alert.show(error.toString());
                    }
                    // Send the job to the printer.
                    myPrintJob.send();
                }
            }
        ]]>
    </mx:Script>
    
    <!-- Closing the print window -->
    <mx:Script>
     <![CDATA[
      import mx.controls.Alert;
      
      private function closePrintWindow():void
      {
       printBackground.visible = false;
       printAppBar.visible = false;
       printPanel.visible = false;
      }
     ]]>
    </mx:Script>

<!-- MXML for the Print Preview Panel -->
 <mx:Canvas height="100%" width="100%" alpha="0.5" id="printBackground" visible="false" backgroundColor="#FFFFFF"/>
 
 <mx:HBox id="printAppBar" visible="false" x="149" y="5" width="150" backgroundColor="#FFFFFF" paddingLeft="6" paddingTop="3" paddingBottom="3">
  <mx:Button label="PRINT" click="doPrint(FlexPrintJobScaleType.SHOW_ALL)" />
  <mx:Button label="CLOSE" click="closePrintWindow()"/> 
 </mx:HBox>
 <mx:Panel id="printPanel" visible="false" x="300" y="5" height="640" width="495" 
  verticalScrollPolicy="off" horizontalScrollPolicy="off" borderAlpha="0" layout="absolute">
     <mx:SWFLoader id="swfLoader"/>
        </mx:Panel> 

<!-- Print Preview Button -->
<mx:LinkButton id="print" label="Print" click="takeSnapshot(myMap)"/>

<esri:Map id="myMap" .....etc. (might need to change the x,y properties of the map if there are components "on top of it")

Static map elements can be added to the "print panel" according to your own map layout preferences.

The screen capture code was copied and modified from this webpage.
http://blog.flexexamples.com/2007/11/16/taking-screenshots-in-flex-using-the-imagesnapshotcaptureimage-method/

Also, if anyone could help me figure out how to get the "zoomSliderVisible" to work for me it would be much appreciated. I've modified my Navigation class using CSS and this appears to break the zoomSliderVisible part of the code. Not sure how to get around it.
EDIT: to fix the zoomSlider problem, this line: myMap.zoomSliderVisible = false; needs to be moved to the first line in the takeSnapshot function.

Matt Williams
GIS Specialist
Illinois State Water Survey

Re: My Print Preview and Print

AlexJones — Tue, 08 Jun 2010 15:47:54 GMT

Did you look at this from the samples?

http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=codeGalleryDetails&scriptID=16778

Re: My Print Preview and Print

MattWilliams — Tue, 08 Jun 2010 16:02:19 GMT

No actually, I didn't. Thanks for showing me this. I guess I just always assumed that the code gallery only had modifications to the flex sample viewer. Glad to see some custom built apps on there now.

Re: My Print Preview and Print

TroySchmidt — Fri, 08 Apr 2011 19:03:22 GMT

Okay so that doesn't exist anymore where I can get to it. Anyone remember the name or can forward me download they downloaded?

Re: My Print Preview and Print

DasaPaddock — Tue, 26 Apr 2011 21:58:42 GMT

Try this:
http://arcscripts.esri.com/details.asp?dbid=16778

topic Re: My Print Preview and Print in ArcGIS API for Flex Questions

My Print Preview and Print

Re: My Print Preview and Print

Re: My Print Preview and Print

Re: My Print Preview and Print

Re: My Print Preview and Print