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="""/>
</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="[email protected]"
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>
運行結果：
