Flex4打印功能的实现

在学习Flex的过程中，你可能会遇到Flex4打印功能的问题，这里和大家分享一下，Flex4打印功能和Silverlight4打印功能步骤很相似，但是实现不同，Flex4的打印功能不是事件驱动，基本步骤如下文介绍。

Flex4打印功能

Flex4打印功能和Silverlight4打印功能步骤很相似，但是实现不同，Flex4的打印功能不是事件驱动，基本步骤如下：

步骤1：建立FlexPrintJob对象，可以把该对象看作Silverlight的PrintDocument;

步骤2：使用一个布尔变量控制要打印的图片格式，例如是打印矢量图还是打印位图;

步骤3：调用FlexPrintJob中的Start()方法，这时会弹出提示窗口，询问是否开始打印，选择确定，将开始打印;

步骤4：建立一个打印对象，并添加这个打印对象到现实列表中;

步骤5：使用FlexPrintJob中的addObject()添加对象到打印页面中;

步骤6：调用FlexPrintJob中的send()方法，对添加的打印页面进行打印;

步骤7：打印后，删除已经打印的视图对象;

下面提供按钮事件代码，点击按钮后，会打印出“HelloWorld”。

protectedfunctionbutton1_clickHandler(event:MouseEvent):void

{

varjob:FlexPrintJob=newFlexPrintJob();

job.printAsBitmap=false;

if(job.start()){

vargroup:HGroup=newHGroup();

group.height=job.pageHeight;

group.width=job.pageWidth;

vartext:SimpleText=newSimpleText();

text.text="Hello";

text.setStyle("fontFamily","Arial");

text.setStyle("fontSize",12);

group.addElement(text);

text=newSimpleText();

text.setStyle("fontFamily","Arial");

text.setStyle("fontSize",12);

text.text="World";

group.addElement(text);

addElement(group);

job.addObject(group,FlexPrintJobScaleType.NONE);

job.send();

removeElement(group);

}

对比上面的两组打印代码可以看出Flex实现打印需要多设置一些参数，主要是因为：

1.在Flex打印中，需要设置打印格式，是位图模式，还是矢量图模式;

2.Flex不支持自动设置打印对象在打印页面中的宽和高;

　总结

　综上所述，我们可以看出Flex4打印功能要比Silverlight的打印功能更加健全，Flex打印功能中的打印高质量的矢量图和自动分页是两个主要亮点，而当前Silverlight4中自动分页是将要打印视图对象切割成两部分实现打印。而Silverlight4中打印功能的全编程模式也是Silverlight的亮点。从微软对Silverlight的定位方向来看，相信在不久的将来，Silverlight的打印功能会更加的强大和完善。

 

 

今天的专业实践检查时，被要求添加一个报表的打印功能，GOD！我哪知道 Flex里怎么实现打印啊，原来想的方案是用游览器自带的打印功能，以为万事OK了，没想到。。。。 
       因为我们的项目里用的是组件开发，因为Flex中不存在一个工程下有多个页面的说法，因为主页面背景改不了，也就意味着用游览器打印只能打印当前显示的全部内容，而不仅仅是一个表格内的内容。。。。 
        中午回来，花了二三个小时上网找了一下资料，结果，找到了单独实现打印和打印预览的代码，皇天不负有心人啊。。。。 
        PS：以下的核心代码来自于网上，我只是将它们两个功能整合在了一起，应该会对要实现打印功能的朋友有帮助（因为打印应该都要先预览一下）。 
 
 Application: 
DataGridPrint.mxml 
<?xml version="1.0"?> 
<!-- printing\DGPrintCustomComp.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
    height="450"  
    width="550"> 
    <mx:states> 
        <mx:State name="printView"> 
            <mx:RemoveChild target="{myForm}"/> 
            <mx:AddChild position="lastChild"> 
                <mx:Panel width="388" height="303" layout="absolute"> 
                    <mx:Image id="img" x="10" y="10"/> 
                </mx:Panel> 
            </mx:AddChild> 
            <mx:AddChild position="lastChild"> 
                <mx:Button label="Back" click="currentState="""/> 
            </mx:AddChild> 
        </mx:State> 
    </mx:states> 
 
    <mx:Script> 
        <![CDATA[ 
            import mx.printing.FlexPrintJob; 
            import myComponent.MyPrintView; 
            import mx.graphics.ImageSnapshot; 
            import mx.core.UIComponent; 
            private function print(u:UIComponent):void{ 
             currentState="printView"; 
                var bmp:BitmapData = ImageSnapshot.captureBitmapData(u); 
                var i:Bitmap = new Bitmap(bmp);                 
                img.source = i; 
                img.scaleContent = true; 
            } 
 
            public function doPrint():void { 
                // Create a FlexPrintJob instance. 
                var printJob:FlexPrintJob = new FlexPrintJob(); 
     
                // Start the print job. 
                if(printJob.start()) { 
                    // Create a MyPrintView control as a child  
                    // of the current view. 
                    var formPrintView:MyPrintView = new MyPrintView(); 
                    addChild(formPrintView);    
                    // Set the print control's data grid data provider to be  
                    // the displayed data grid's data provider. 
                    formPrintView.myDataGrid.dataProvider =  
                        myDataGrid.dataProvider;    
                    // Add the SimplePrintview control to the print job. 
                    // For comparison, try setting the  
                    // second parameter to "none". 
                    printJob.addObject(formPrintView); 
     
                    // Send the job to the printer. 
                    printJob.send(); 
     
                    // Remove the print-specific control to free memory. 
                    removeChild(formPrintView); 
                } 
            } 
        ]]> 
    </mx:Script> 
 
    <!-- The form to display--> 
    <mx:Form id="myForm"> 
        <mx:FormHeading label="Contact Information"/> 
        <mx:FormItem label="Name: "> 
            <mx:TextInput id="custName"  
                width="200"  
                text="Samuel Smith" 
                fontWeight="bold"/> 
        </mx:FormItem> 
        <mx:FormItem label="Phone: "> 
            <mx:TextInput id="custPhone"  
                width="200"  
                text="617-555-1212" 
                fontWeight="bold"/> 
        </mx:FormItem> 
        <mx:FormItem label="Email: "> 
            <mx:TextInput id="custEmail"  
                width="200"  
                text="[e-mail]" 
                fontWeight="bold"/> 
        </mx:FormItem> 
 
        <mx:FormHeading label="Product Information"/> 
        <mx:DataGrid id="myDataGrid" width="300"> 
            <mx:dataProvider> 
                <mx:Object Product="Flash" Code="1000"/> 
                <mx:Object Product="Flex" Code="2000"/> 
                <mx:Object Product="ColdFusion" Code="3000"/> 
                <mx:Object Product="JRun" Code="4000"/> 
            </mx:dataProvider> 
        </mx:DataGrid> 
        <mx:Button label="PrintView" click="print(myDataGrid)"/> 
        <mx:FormItem label="Label"> 
        </mx:FormItem> 
        <mx:Button id="myButton"  
            label="Print"  
            click="doPrint();"/> 
    </mx:Form> 
</mx:Application> 
 
Component: 
MyPrintView. mxml（这是一个组件） 
<?xml version="1.0"?> 
<!-- printing\myComponents\MyPrintView.mxml --> 
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"  
    backgroundColor="#FFFFFF"  
    height="250" width="450"  
    paddingTop="50" paddingLeft="50" paddingRight="50"> 
 
    <!-- The controls to print, a PrintDataGrid control. --> 
    <mx:PrintDataGrid id="myDataGrid" width="100%"> 
        <mx:columns> 
            <mx:DataGridColumn dataField="Product"/> 
            <mx:DataGridColumn dataField="Code"/> 
        </mx:columns> 
    </mx:PrintDataGrid> 
</mx:VBox>

 

评论

3 楼 陌上君 2016-11-25  

文章很好 ，记下了，多谢。上面那个不小心的留言删了吧

2 楼 陌上君 2016-11-25  

引用

引用

[u][i][b]

[flash[color=violet]=200,200][url][url][list]
[*][list]	[color=brown]
[*][*][list]
[*][*][*][list]
[*][*][*][*][list]	[size=medium][/size]
[*][*][*][*][*]
[*][*][*][*][/list]
[*][*][*][/list]
[*][*][/list]
[*][/list]	[/color]
[/list][/url][/url][/flash]

[/b][/i][/u]

[/color]

1 楼 Slardar_007 2015-01-15  

sssssssssss