Flex实践——Datagrid的打印预览与打印

      今天的专业实践检查时，被要求添加一个报表的打印功能，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=&quot;&quot;"/>
            </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>

运行结果：

评论

2 楼 阿尔萨斯 2012-12-25  

楼主有没有把这个功能完成啊

1 楼 lqw8668 2009-09-09