Print PDF from flex

hi guys

I have a requirment where i have a page which has lot of fields.

<mx:VBox>
<mx:RichTextEditor id="q1" width="1050"
title="Question 1:  "
text="data.q1"
maxHeight="261" creationComplete="expcoll(event)"/>

....
....
<mx:RichTextEditor id="q20" width="1050"
title="Question 20:  "
text="data.q20"
maxHeight="261" creationComplete="expcoll(event)"/>
....
...
<mx:CheckBox id="myCheckBox" label="{data.name}" selected="{data.value}" />
<mx:button label="Print Pdf" click="popupPDF()"/>
</mx:VBox>

I have a button with label 'Print Pdf'. When user clicks on the button, i need to pop-up a PDF and display all the data in the PDF.

If anyone has done this and can help i will really appreciate it.

thanks.
royjaydAsked:
Who is Participating?
 
dgofmanConnect With a Mentor Commented:
In this case just loop number of questions and create lines with questions and answers

var myPDFEncoder:PDF = new PDF(Orientation.PORTRAIT, Unit.POINT, Size.LETTER);
myPDFEncoder.addPage();

myPDFEncoder.setFont(FontFamily.ARIAL , "", 24); 
myPDFEncoder.addText(strbenefits2.title, 0, 50);

myPDFEncoder.setFont(FontFamily.ARIAL , "", 14); 
myPDFEncoder.addText(strbenefits2.text, 30, 100);

/*myPDFEncoder.addImage(wizardStack, 0, 0, 800, 600);
myPDFEncoder.setDisplayMode(Display.REAL, Layout.SINGLE_PAGE, PageMode.USE_NONE, 1);*/
var output:* = myPDFEncoder.save(Method.LOCAL);
var aFile:FileReference = new FileReference();
aFile.save(output,"myPDF.pdf");

Open in new window

0
 
dgofmanCommented:
You can use AlivePDF for solving your problem.

http://www.bytearray.org/?p=101
0
 
royjaydAuthor Commented:
Just curious ,will it allow me a print option ?
0
Creating Active Directory Users from a Text File

If your organization has a need to mass-create AD user accounts, watch this video to see how its done without the need for scripting or other unnecessary complexities.

 
royjaydAuthor Commented:
ok , got the answer..thanks.
0
 
dgofmanCommented:
Not really, it will generate PDF file but you can ask user to save on Desktop and open and print.
Or load thi file into HTML embed tag and vew and print from popup window.
0
 
royjaydAuthor Commented:
actually it does give the option to print. Just click on the 'Generate PDF' button on the page
and it opens a pdf with print option.
0
 
royjaydAuthor Commented:
looking for a sample project which uses this api. do you know if there is any sample project?

thanks
0
 
dgofmanCommented:
Hi royjayd,
I can give you another scenario.
How about you will create two buttons.
1) Generate PDF
2) Preview

By clicking "Generate PDF" you will use AlivePDF API
By clicking  "Preview" button you will open a new view using PopupManager with mx.printing.PrintAdvancedDataGrid and button "Print"

In the data Grid you will populate all your questions and answer there.
when user click "Print" you will call

var printJob:FlexPrintJob = new FlexPrintJob();
printJob.send();

See nice example here / Printing

http://examples.adobe.com/flex3/componentexplorer/explorer.html
0
 
royjaydAuthor Commented:
>>>In the data Grid you will populate all your questions and answer there

dgofman, nice sugession but my screen is little complex. I have three tabs. there are 50 questions total under all three tabs combined. 30 of them are rich text area boxes, 5 of them are
editable datagrids, and 15 checkboxes.

so i dont want to show them all in datagrid but want to show all the 50 questions (richtextareas + datagrids + checkboxes) seperately in the PDF.
0
 
dgofmanCommented:
Hi royiayd,
I gave you PrintingDataGrid as example, if you want to create "printable" page with your component you can check Adobe documentation

http://livedocs.adobe.com/livecycle/8.2/programLC/common/langref/mx/printing/FlexPrintJob.html

For generating PDF you have to use AlivePDF, but in this case user should loaded generated file on the Desktop and open it before will able to print.

Another option you can capture as image your form or application send image to the server and upload into flex or open as new browser tab for printing

http://henryjones.us/articles/using-the-as3-jpeg-encoder
0
 
royjaydAuthor Commented:
ok, looking into it. give me some time and i will get back to you.

I have two open questions. If you get some time can you please look into it and advice, i really appreciate it...thanks.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26932758.html

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26932423.html
0
 
royjaydAuthor Commented:
hi dgofman:
trying to pop up the pdf using Alivepdf API.  I have data under three tabs which i am trying to put in the pdf.
code:

public function printPdf():void{
var myPDFEncoder:PDF = new PDF ( Orientation.PORTRAIT, Unit.MM, Size.A4 );  
myPDFEncoder.addPage();
myPDFEncoder.addImage (canvas, null , true, ImageFormat.JPG, 100);
myPDFEncoder.savePDF ( Method.REMOTE, &quot;http://localhost/pdf/create.php";, Download.ATTACHMENT, &quot;myPDF.pdf&quot; );
}

<mx:HBox width="100%" horizontalAlign="center" direction="horizontal"paddingLeft="10" paddingRight="10" >                              
<mx:Button lable="Print PDF" click="printPdf()"/>  --button when clicked pops up the PDF</mx:HBox>

<mx:ViewStack id="wizardStack" height="1000" >
<!-- first tab -->
<mx:VBox label="Buisness" showEffect="coverFlowEffect" hideEffect="coverFlowEffect" >      
<mx:VBox width="66%" styleName="responseBox">
<mx:HBox width="66%">
<mx:RichTextEditor id="strbenefits2" width="1050" title="Question 1: What are the Business Proposals "   text="This is answer as followssss 1.xxxxxx 2.YYYYY"    maxHeight="261" creationComplete="expcoll(event)"/>
</mx:HBox>                  
</mx:VBox>
</mx:VBox>            
            
<!-- second tab -->
<mx:VBox label="Proposed Plans" showEffect="coverFlowEffect" hideEffect="coverFlowEffect">
<mx:VBox width="66%" styleName="responseBox">
<mx:HBox width="66%" >
<mx:RichTextEditor id="interfacechanges" width="1050"  title="Question 2:  List changes involved:"
 text="The changes are changes to interfaces, changes to outlook"   maxHeight="261" creationComplete="expcoll(event)"/>            
</mx:HBox>                  
</mx:VBox>
</mx:VBox>

<!-- third tab : Landscape Plans-->
<mx:VBox label="Landscape Plans" showEffect="coverFlowEffect" hideEffect="coverFlowEffect" >
<mx:VBox width="66%" styleName="responseBox">
<mx:Panel id="rtep15" width="1050" maxHeight="261" title="Question 15. Components and Vendors"
 creationComplete="expcollLabel(event)">
<mx:HBox styleName="projAnswerBox"  width="100%" height="201">
<mx:DataGrid id="dg" horizontalGridLineColor="#000066" horizontalGridLines="true"
 dataProvider="{rows}" width="998" editable="true" initialize="datagrid1_initializeHandler(event)"
 height="180" borderStyle="solid">
<mx:columns>
<mx:DataGridColumn dataField="col1" textAlign="left" headerText="List the name of
service" resizable="true" sortable="true"/>
<mx:DataGridColumn dataField="col2" textAlign="left" headerText="Specify change(s) required" resizable="true" sortable="true"/>
<mx:DataGridColumn dataField="col3" textAlign="left" headerText="benefits" resizable="true" sortable="true"/>                                    
</mx:columns>
</mx:DataGrid>
</mx:HBox>                  
</mx:Panel>
</mx:VBox>      
</mx:VBox>

</mx:ViewStack>


Am i in the right path? I am trying to understand the API
var myPDFEncoder:PDF = new PDF ( Orientation.PORTRAIT, Unit.MM, Size.A4 );  
Do i have to download Alivepdf .as file ?

thanks!
0
 
dgofmanCommented:
Try this

<?xml version="1.0" encoding="utf-8"?>
<s:Application  xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx">

	<fx:Script>
		<![CDATA[
			import org.alivepdf.display.Display;
			import org.alivepdf.display.PageMode;
			import org.alivepdf.layout.Layout;
			import org.alivepdf.layout.Orientation;
			import org.alivepdf.layout.Size;
			import org.alivepdf.layout.Unit;
			import org.alivepdf.pdf.PDF;
			import org.alivepdf.saving.Method;


			[Bindable] private var rows:Array;

			public function printPdf():void{
				var myPDFEncoder:PDF = new PDF(Orientation.PORTRAIT, Unit.POINT, Size.LETTER);
				myPDFEncoder.addPage();
				myPDFEncoder.addImage(wizardStack, 0, 0, 800, 600);
				myPDFEncoder.setDisplayMode(Display.REAL, Layout.SINGLE_PAGE, PageMode.USE_NONE, 1);
				var output:* = myPDFEncoder.save(Method.LOCAL);
				var aFile:FileReference = new FileReference();
				aFile.save(output,"myPDF.pdf");

			}
			
			private function expcoll(event:Event):void{
			}
			
			private function expcollLabel(event:Event):void{
			}
			
			private function datagrid1_initializeHandler(event:Event):void{
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<mx:HBox width="100%" horizontalAlign="center" direction="horizontal" paddingLeft="10" paddingRight="10" >
		<mx:Button label="Print PDF" click="printPdf()"/> 
	</mx:HBox>
	
	<mx:ViewStack id="wizardStack" height="1000" >
		<!-- first tab -->
		<mx:VBox label="Buisness" showEffect="coverFlowEffect" hideEffect="coverFlowEffect" >      
			<mx:VBox width="66%" styleName="responseBox">
				<mx:HBox width="66%">
					<mx:RichTextEditor id="strbenefits2" width="1050" title="Question 1: What are the Business Proposals" text="This is answer as followssss 1.xxxxxx 2.YYYYY"    maxHeight="261" creationComplete="expcoll(event)"/>
				</mx:HBox>                  
			</mx:VBox>
		</mx:VBox>            
		
		<!-- second tab -->
		<mx:VBox label="Proposed Plans" showEffect="coverFlowEffect" hideEffect="coverFlowEffect">
			<mx:VBox width="66%" styleName="responseBox">
				<mx:HBox width="66%" >
					<mx:RichTextEditor id="interfacechanges" width="1050"  title="Question 2:  List changes involved:"
									   text="The changes are changes to interfaces, changes to outlook"   maxHeight="261" creationComplete="expcoll(event)"/>             
				</mx:HBox>                  
			</mx:VBox>
		</mx:VBox>
		
		<!-- third tab : Landscape Plans-->
		<mx:VBox label="Landscape Plans" showEffect="coverFlowEffect" hideEffect="coverFlowEffect" >
			<mx:VBox width="66%" styleName="responseBox">
				<mx:Panel id="rtep15" width="1050" maxHeight="261" title="Question 15. Components and Vendors"
						  creationComplete="expcollLabel(event)">
					<mx:HBox styleName="projAnswerBox"  width="100%" height="201">
						<mx:DataGrid id="dg" horizontalGridLineColor="#000066" horizontalGridLines="true" 
									 dataProvider="{rows}" width="998" editable="true" initialize="datagrid1_initializeHandler(event)" 
									 height="180" borderStyle="solid">
							<mx:columns>
								<mx:DataGridColumn dataField="col1" textAlign="left" headerText="List the name of 
												   service" resizable="true" sortable="true"/>
								<mx:DataGridColumn dataField="col2" textAlign="left" headerText="Specify change(s) required" resizable="true" sortable="true"/>
								<mx:DataGridColumn dataField="col3" textAlign="left" headerText="benefits" resizable="true" sortable="true"/>                                    
							</mx:columns>
						</mx:DataGrid>
					</mx:HBox>                  
				</mx:Panel>
			</mx:VBox>      
		</mx:VBox>
		
	</mx:ViewStack>
</s:Application> 

Open in new window

0
 
royjaydAuthor Commented:
hi..
>>>var myPDFEncoder:PDF = new PDF(Orientation.PORTRAIT, Unit.POINT, Size.LETTER);
On this line the error i get is : Type was not found or not compile time constant: PDF


do i have to download the alivepdf.as file and put it in my path ?

0
 
dgofmanCommented:
Looks like you are using old SWC

Download latest file from Google  AlivePDF 0.1.4.9.zip  

http://code.google.com/p/alivepdf/downloads/detail?name=AlivePDF%200.1.4.9.zip&can=2&q=

and Import SWC in your project LIbrary Path
0
 
royjaydAuthor Commented:
ok did that. all error are gone except one

on this line>>aFile.save(output,"myPDF.pdf");  error is
call to a undefined method with reference to static type : FileReference
0
 
dgofmanCommented:
Looks like you create Project using Flex SDK 3.
In this case by default its using 9.0.x Flash Player.
You need manually change to 10.0.x

 Compiler 10.0.0
0
 
royjaydAuthor Commented:
heeee , but since most of my questions are rich text areas with expand collapse, all the questions are in collapsed form :)

0
 
dgofmanCommented:
Add each collapsed form as new image into your PDF.
Where is the problem?
0
 
royjaydAuthor Commented:
Actually the requirment is in the pdf i want somehting like

Question 1
answer 1

so if i have this code in mxml
<mx:RichTextEditor id="strbenefits2" width="1050" title="Question 1: What are the Business Proposals?"   text="This is answer as followssss 1.xxxxxx 2.YYYYY"    maxHeight="261" creationComplete="expcoll(event)"/>

in my pdf i want the title as 'Question'  and text as 'Answer'
so in the pdf it should display

Question 1: What are the Business Proposals                                  -- the question
This is answer as followssss 1.xxxxxx 2.YYYYY  .                       -- the answer

datagrid should display as is (in a table)
0
 
royjaydAuthor Commented:
thanks for help.
0
 
royjaydAuthor Commented:
hi dgofman:
When you have some time can you please help me with this question, i am stuck here.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26981918.html

I will greatly appreciate it
thanks in advance.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.