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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
royjaydAuthor Commented:
ok , got the answer..thanks.
0
IT Pros Agree: AI and Machine Learning Key

We’d all like to think our company’s data is well protected, but when you ask IT professionals they admit the data probably is not as safe as it could be.

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
dgofmanCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.