Flex 4打印功能

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" />

<!--如果 sizeToPage 属性为 false，且 PrintDataGrid 仅显示完全可见的行而不显示部分行，则为 PrintDataGrid 的高度 -->

<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使用示例