Flex2で帳票作成

Flex2で帳票を作る、という話。

JavaAppletを使い「print」メソッドを実装してごりごり帳票を作っていた時代が僕にもありましたが、Flex2でも同じような事ができるようです。

「mx.printing.FlexPrintJob」というクラスがあり、このクラスを介してプリンターにデータを流し込むことが出来ます。
用意するのは、印刷したい帳票ページを設定したUIComponent。
例えば、下のような感じで２ページほどmxmlを作成します。

1ページ目
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="800">
  <mx:TextArea left="0" right="0" top="0" bottom="0">
    <mx:htmlText>
      <![CDATA[
NetBeans - The Only IDE You Need
 
A free, open-source Integrated Development Environment for software developers. You get all the tools you need to create professional desktop, enterprise, web, and mobile applications with the Java language, C/C++, and Ruby. NetBeans IDE is easy to install and use straight out of the box and runs on many platforms including Windows, Linux, Mac OS X and Solaris. 

The NetBeans IDE 6.1 release provides several new features and enhancements, such as rich JavaScript editing features, support for using the Spring web framework, and tighter MySQL integration. This release also provides improved performance, especially faster startup (up to 40%), lower memory consumption and improved responsiveness while working with large projects. 

What do developers say about the NetBeans IDE? Read their testimonials and switch stories.
        
      ]]>
    </mx:htmlText>
  </mx:TextArea>  
</mx:Canvas>
</mx:Canvas>

2ページ目
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="800" backgroundColor="#FFFFFF">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var nekobean:ArrayCollection = new ArrayCollection([
        {label:"かわいい", value:60},
        {label:"抱きしめたい", value:30},
        {label:"唯一のIDE", value:7},
        {label:"食べてみたい", value:3}
     ]);
  ]]></mx:Script>

  <mx:Label x="32" y="31" text="ねこびーん" width="163" fontSize="26"/>
  <mx:Image source="@Embed('nekobean.png')" x="44" y="167"/>
  <mx:PieChart  x="238" y="81" width="324" height="293" dataProvider="{nekobean}">
    <mx:series>
      <mx:PieSeries labelField="label" field="value" labelPosition="callout"/>
    </mx:series>
  </mx:PieChart>
  
</mx:Canvas>

テキスト、画像、円グラフなどをいれていますが、ごく普通のmxmlです。
この2つのページを使い、プリンターに投げます。

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="800" height="600" xmlns:local="*"
  backgroundColor="#FFFFFF"
  >
    <mx:Script>
    <![CDATA[
      import mx.printing.FlexPrintJob;
      public function print():void{
        var printJob:FlexPrintJob = new FlexPrintJob();
        printJob.start();
        
        printJob.addObject(page1);
        printJob.addObject(page2);
        
        printJob.send();
      }
    ]]>
  </mx:Script>
  <mx:HBox borderThickness="2" borderColor="#000000" borderStyle="outset">
    <local:PrintPage1 id="page1"/>
  </mx:HBox>
  <mx:HBox borderThickness="2" borderColor="#000000" borderStyle="outset">
    <local:PrintPage2 id="page2"/>  
  </mx:HBox>  
  <mx:ControlBar>
    <mx:Button label="印刷" click="{print()}"/>
  </mx:ControlBar>
</mx:TitleWindow>

PrintJobクラスをインスタンス化し、start()メソッドを呼びます。呼び出すと、その時点で印刷ダイアログが出ます。
ここは同期なので安心してください。
印刷を開始した後、printJobに対してUIComponentのインスタンスを渡します。
渡すごとに新しいページが印刷されるようです（この場合だと2ページ）
最後に、send()をよび、プリンターに送り込みます。

実際に動くサンプルはこちら
Flex印刷サンプル

チャートとかも結構きれいに出ます。
画面ハードコピーを取るのと同じやり方で、プリンターのAPIをgraphicsに隠蔽して描画しているのではないかと思います。

ちなみに1ページ目はTextAreaで作ってあるので、適当に文字を書き込むとそれがそのまま印刷されます。
契約書などをこれで作ってしまうと、すごいセキュリティホールになるので気をつけてください。