Flex 4打印功能

最新推荐文章于 2016-09-13 20:25:05 发布

飞龙剑

最新推荐文章于 2016-09-13 20:25:05 发布

阅读量7.2k

点赞数

分类专栏： Flex 文章标签： flex datagrid application button import function

Flex 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Flex 4打印功能

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

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

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

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

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

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

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

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

　　下面提供按钮事件代码，点击按钮后，会打印出“Hello World”。
protected function button1_clickHandler(event:MouseEvent):void

{

var job : FlexPrintJob = new FlexPrintJob();

job.printAsBitmap = false;

if(job.start()) {

var group : HGroup = new HGroup();

group.height = job.pageHeight;

group.width = job.pageWidth;

var text : SimpleText = new SimpleText();

text.text = "Hello ";

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

text.setStyle("fontSize",12);

group.addElement(text);

text = new SimpleText();

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中的打印技术

时间:2009-06-29 20:40来源:未知作者:admin 点击: 次

总结了一下打印技术。大家看看吧。 1.简单的例子 ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout=absolute fontSize=12 mx:Script ![CDATA[ import mx.printing.FlexPrintJob; publi

总结了一下打印技术。大家看看吧。
1.简单的例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
<mx:Script>
    <![CDATA[
        import mx.printing.FlexPrintJob;
        public function doPrint():void
        {
            var printjob:FlexPrintJob = new FlexPrintJob();
            printjob.start();
            printjob.addObject(box);
            printjob.send();
        }
    ]]>
</mx:Script>
<mx:VBox id="box" x="225" y="58" width="303" height="260">
    <mx:Label text="This is a placeholder for first page contents"/>
    <mx:Button label="Print" click="doPrint()" />
</mx:VBox>
</mx:Application>

2.实现Datagrid的打印
组件FormPrintHeader.mxml:
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="60%"
    horizontalAlign="right" >
    <mx:Label text="我是打印组件的头部。"/>
</mx:VBox>

组件FormPrintFooter.mxml:
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="60%"
    horizontalAlign="right" >
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var pTotal:Number = 0;
        ]]>
    </mx:Script>
    <mx:Label text="我是尾部总行数: {pTotal}"/>
</mx:VBox>

组件FormPrintView.mxml:

<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" backgroundColor="#FFFFFF"
    paddingTop="50" paddingBottom="50" paddingLeft="50">

    <mx:Script>
        <![CDATA[
            import mx.core.*
            [Bindable]
            public var pageNumber:Number = 1;
            [Bindable]
            public var prodTotal:Number = 0;

            //打印的头尾的显示方式
            public function showPage(pageType:String):void {
                if(pageType == "first" || pageType == "middle") {// 隐藏尾部
                    footer.includeInLayout=false;
                    footer.visible = false;
                }
                if(pageType == "middle" || pageType == "last") {// 隐藏头部
                    header.includeInLayout=false;
                    header.visible = false;
                }
                if(pageType == "last") {// 显示尾部
                    footer.includeInLayout=true;
                    footer.visible = true;
                }
                validateNow();//不知这是什么？
            }
        ]]>
    </mx:Script>
    <mx:VBox width="80%" horizontalAlign="left">
        <mx:Label text="Page {pageNumber}"/>
    </mx:VBox>

    
    <FormPrintHeader id="header" />
    
    <mx:PrintDataGrid id="myDataGrid" width="60%" height="100%" sizeToPage="true">
        <mx:columns>
            <mx:DataGridColumn dataField="Index" />
            <mx:DataGridColumn dataField="Qty" />
        </mx:columns>
    </mx:PrintDataGrid>

    
    <FormPrintFooter id="footer" pTotal="{prodTotal}" />

</mx:VBox>

最后就是主要的文件了：
main.mxml:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
    <mx:Script>
        <![CDATA[
        import mx.printing.*;
        import mx.collections.ArrayCollection;
        import FormPrintView;//引入自定义的组件

        [Bindable]
        public var dgProvider:ArrayCollection = new ArrayCollection;;
        public var footerHeight:Number = 20;
        public var prodTotal:Number = 0;
        public var flag:Number;
        // 生成数据以填充表格
        public function setdgProvider(max:int):void {
            flag=1;
            dgProvider.removeAll();//清空所有数据
            for (var i:int=0; i<max; i++)
            {
                var prod1:Object = {};
                prod1.Qty = flag * 5;
                prod1.Index = flag++;
                prodTotal = max;//总行数
                dgProvider.addItem(prod1);
            }
        }

        // 打印
        public function doPrint():void {
            var printJob:FlexPrintJob = new FlexPrintJob();
            if (printJob.start()) {
                var thePrintView:FormPrintView = new FormPrintView();//创建自定义的FormPrintView
               Application.application.addChild(thePrintView);//加入到Application

                //设置自定义的FormPrintView属性
                thePrintView.width=printJob.pageWidth;
                thePrintView.height=printJob.pageHeight;
                thePrintView.prodTotal = prodTotal;
                //设置自定义的FormPrintView它中的myDataGrid数据源
                thePrintView.myDataGrid.dataProvider = myDataGrid.dataProvider;
                thePrintView.showPage("single");//显示方式
//validNextPage 属性 validNextPage:Boolean []指示包含 PrintDataGrid 控件当前显示的行之后的其他数据行的数据提供程序。
                if(!thePrintView.myDataGrid.validNextPage)
                {
                    printJob.addObject(thePrintView);//添加打印的对象
                }else{
                    thePrintView.showPage("first");
                    printJob.addObject(thePrintView);
                    thePrintView.pageNumber++;
                    while(true)
                    {
//nextPage方法将下一个数据行集放在视图中，即将 PrintDataGridverticalScrollPosition 属性设置为 verticalScrollPosition +（可滚动行数）。
                        thePrintView.myDataGrid.nextPage();
                        thePrintView.showPage("last");
                        if(!thePrintView.myDataGrid.validNextPage)
                        {
                            printJob.addObject(thePrintView);
                            break;
                        }else{
                            thePrintView.showPage("middle");
                            printJob.addObject(thePrintView);
                            thePrintView.pageNumber++;
                        }
                    }
                }
                Application.application.removeChild(thePrintView);
            }
            printJob.send();
        }
        ]]>
    </mx:Script>

    <mx:Panel title="DataGrid Printing Example" height="75%" width="75%"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:DataGrid id="myDataGrid" dataProvider="{dgProvider}">
            <mx:columns>
                <mx:DataGridColumn dataField="Index"/>
                <mx:DataGridColumn dataField="Qty"/>
            </mx:columns>
        </mx:DataGrid>

        <mx:TextInput id="dataItems" text="10"/>

        <mx:HBox>
            <mx:Button id="setDP" label="Fill Grid" click="setdgProvider(int(dataItems.text));"/>
            <mx:Button id="printDG" label="Print" click="doPrint();"/>
        </mx:HBox>
    </mx:Panel>
</mx:Application>

3.实现Datagrid的打印预览与打印
组件MyPrintView.mxml:
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    height="250" width="450"
    paddingTop="50" paddingLeft="50" paddingRight="50">
    <mx:PrintDataGrid id="myDataGrid" width="100%">
        <mx:columns>
            <mx:DataGridColumn dataField="Product"/>
            <mx:DataGridColumn dataField="Code"/>
        </mx:columns>
    </mx:PrintDataGrid>
</mx:VBox>

PrintDatagrid.mxml:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:states>
        <mx:State name="printView">
            <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:RemoveChild target="{myDataGrid}"/>
            <mx:RemoveChild target="{button1}"/>
            <mx:RemoveChild target="{myButton}"/>
        </mx:State>
    </mx:states>

    <mx:Script>
        <![CDATA[
            import mx.printing.FlexPrintJob;
            import MyPrintView;
            import mx.graphics.ImageSnapshot;
            import mx.core.UIComponent;
            //把myDataGrid转换成图片。
            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 {
                var printJob:FlexPrintJob = new FlexPrintJob();
                if(printJob.start()) {
                    //创建自定义的MyPrintView
                    var formPrintView:MyPrintView = new MyPrintView();
                    addChild(formPrintView); //加入到Application
                    formPrintView.myDataGrid.dataProvider = myDataGrid.dataProvider;
                    printJob.addObject(formPrintView);
                    printJob.send();
                    removeChild(formPrintView);
                }
            }
        ]]>
    </mx:Script>
        <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)" id="button1"/>
        <mx:Button id="myButton" label="Print" click="doPrint();"/>
</mx:Application>

Flex打印之横向打印&多页打印

2009-03-03 10:10

[创]

Flex提供两种打印方法：FlexPrintJob和PrintJob。

一、由于flex是打印图像的缘故，打印出来的文字、表格会不清晰。解决方法如下：

1、将FlexPrintJob中printAsBitmap属性设置为true。
2、使用PrintJob

二、打印缩放的解决方法

1、FlexPrintJob.addObject()中 scaleType 可以使用 FlexPrintJobScaleType，FlexPrintJobScaleType中定义了缩放的几种常见方式。

<pre>

2、PrintJob默认为不缩放输出，如需要缩放可以使用 scale 属性

    var pj:PrintJob = new PrintJob();
    var xScale:Number;
    var yScale:Number;
        xScale = (pj.pageWidth / this.height);
        yScale = (pj.pageHeight / this.width);
    this.scaleX= Math.min(xScale, yScale);
    this.scaleY = Math.min(xScale, yScale);
    pj.addPage(this);
    pj.send();

三、打印的横向和纵向的控制

1、判断打印方向

利用 PrintJob.orientation（图像打印方向）判断，PrintJob.orientation == PrintJobOrientation.LANDSCAPE 或者PrintJobOrientation.PORTRAIT（LANDSCAPE表示横向打印；PORTRAIT表示纵向打印）

2、如需改变方向

this.rotation = 90; 即表示旋转90度

3、转动后文字消失问题

绝大多数文字在转动后会出现消失问题，是由于字体的缘故。有两个解决方法：

（1）将字体加载到文件中，该方法缺点是对于中文而言消耗大，通常达到几M，英文常在几十K内。也可以用外嵌字体，将字体打包成另外一个swf文件，然后由主flash文件去外部调用

<pre>
   @font-face
      {
fontFamily: "simhei";
src: url("assets/simhei.ttf");
fontWeight: normal;
      }
    global
      {
fontFamily: "simsun";
fontWeight: normal;
fontSize: 10;
color:#000000;
      }
</pre>
<pre>
    private function completeHandle(e:Event):void{
        fontClass = Object(e.target.content).loaderInfo.applicationDomain.getDefinition("Font1") as Class
        Font.registerFont(fontClass);
        tt.styleName = "myPlainStyle"
         tt.rotation = 30;
    }
</pre>

（2）使用Bitmap和Bitmapdata类，将文字转化为图像后再转动。该方法消耗小，但是文字有可能失真，而且对每个文字组件都要进行转换。
    var bmp:BitmapData = new BitmapData(aa.width,aa.height,true);
        bmp.draw(aa);
    var bt:Bitmap = new Bitmap(bmp);
    var img:Image = new Image();
        img.source = bt;
        img.x = 200;
        img.y = 200;
        img.rotation = 120;
        addChild(img);

转动后显示图像页会随之改变所以打印发送完毕后，要将显示的内容再旋转会去，参考http://jessewarden.com/2008/09/forcing-landscape-printing-in-flex-2-3.html

4、多页打印可使用PrintJob，请参见adobe使用示例

飞龙剑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Flex 4打印功能

Flex 4打印功能　　Flex4的打印功能和Silverlight 4打印功能步骤很相似，但是实现不同，Flex 4的打印功能不是事件驱动，基本步骤如下：　　步骤1：建立FlexPrintJob对象，可以把该对象看作Silverlight的PrintDocument;　　步骤2：使用一个布尔变量控制要打印的图片格式，例如是打印矢量图还是打印位图;　　步骤3：调用FlexPrin
复制链接

扫一扫