How to get Flex to produce a PDF file using Flash Player 10

Hi. My name is William Lorfing and I a Development Support Engineer for the Intuit Developer Network.

I have been with Intuit for over a year now and one of the questions that comes up from time to time is to show an example of how to get a Flex app to produce a PDF file.

My thoughts were, "that shouldn't be too hard!". Now where do I find that code on Google? Ok, it was a little harder than I thought. I am new to Flex, so I had to work through getting the environment set up and figuring out how to load the external libraries. Another problem was that if you were using Flash Player 9, you couldn't create the PDF on the client, but had to use the server to do this. With Flash Player 10, they allowed you to write files locally, so this was the way I went.

Well, Google was helpful and took me to Holly Schinsky's Devgirl's Weblog where she created a Flex script for creating a PDF file for Adobe's Tour de Flex. So, this is where I will begin my journey.

I started by creating a new Flex Project and importing the Open Source AlivePDF library from http://code.google.com. (This might not have been the correct way to do it, but it worked for me.) I tried using the RC version, but for some reason it didn't work, so I ended up downloading the latest SVN version and that worked.

I wanted to start simple, so I created a basic UI with a multi-line text box and a save button. The save button then called a couple of functions from the AlivePDF library to create the PDF pages and then a call to the FileReference save method and poof you have a PDF file.

Building a PDF file using the AlivePDF library, is much like designing a graphical interface. You put your text fields and graphics at certain positions on the page and the library takes care of the rest. I am not good at UI's so I stuck with the basic and just put the text from the Flex text box into the PDF.

Here is what the I came up with.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

    <mx:Script>
        <![CDATA[

        import flash.display.*;
        import flash.events.*;
        import flash.net.*;
        import flash.text.*;
       
        import org.alivepdf.pdf.PDF;
        import org.alivepdf.layout.Orientation;
        import org.alivepdf.layout.Size;
        import org.alivepdf.layout.Unit;
        import org.alivepdf.saving.Method;
       
        import flash.utils.ByteArray;

        protected var frPDF:PDF;

        private function onSave(e:Event):void
        {
            frPDF = new PDF(Orientation.PORTRAIT, Unit.MM, Size.LETTER);
            frPDF.addPage();
            frPDF.addMultiCell(200,5,desc.text);
            var bytes:ByteArray = frPDF.save(Method.LOCAL);
            var f:FileReference = new FileReference();
            f.save(bytes,"sample.pdf");
             
        }
        ]]>

    </mx:Script>   

    <mx:Label top="10" left="10" text="Enter text, then press Save to PDF." />   
    <mx:HBox width="100%" height="100%" top="40" left="10" >
   
        <mx:Canvas top="10" left="10" width="300" height="100%">
            <mx:Label text="Description:" y="2"/>
            <mx:TextArea id="desc" y="18" height="133" width="205"/>   
        </mx:Canvas>
    </mx:HBox>
   
    <mx:HBox top="205" left="50">
        <mx:Button horizontalCenter="0" click="onSave(event)" label="Save to PDF" id="savePDFBtn"/>
    </mx:HBox>
   
</mx:Application>

There are a lot of different methods in the AlivePDF library, so have fun and play around with some of them.

Thanks,

William