Rendering PDF content in Adobe AIR application

We can render PDF content in Adobe AIR application. You have to use the HTMLLoader to load the PDF and add the HTMLLoader to the window. You cannot add HTMLLoader as a child to the Flex containers as the Flex containers expect the child components to be a UIComponent, so we have to wrap the HTMLLoader into UIComponent and then add it to the Flex containers.

This same code can be used for HTML, TXT, JPG and PNG files. If the file being loaded is not PDF then we need not check for the PDF capability.

PDF content rendered in AIR application

PDF file rendered in mx:Window

JPG file rendered in AIR application

JPG file rendered in mx:Window

Code for rendering content in Adobe AIR

if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK)

{

var htmlLoader:HTMLLoader = new HTMLLoader();

var url:URLRequest = new URLRequest(pathUrl); //URL to the file

htmlLoader.width = windowWidth; //width of the content area

htmlLoader.height = windowHeight; //height of the content area

htmlLoader.load(url);

//wrapping into UIComponent

var holder:UIComponent = new UIComponent();

holder.addChild(htmlLoader);

addChild(holder); //add it to any container

}

53 Responses to Rendering PDF content in Adobe AIR application

  1. James says:

    This code is not working, any ideas?
    if(flash.html.HTMLLoader.pdfCapability ==HTMLPDFCapability.STATUS_OK)
    {
    var htmlLoader:HTMLLoader = new HTMLLoader();
    var url:URLRequest = new URLRequest(“file:///c://Test//Abc.pdf”); htmlLoader.load(url);
    var holder:UIComponent = new UIComponent;
    holder.addChild(htmlLoader);
    pdfPnl.addChild(holder);

  2. Sujit Reddy G says:

    Are you getting any runtime errors? What exactly is happening? Is the PDF not rendered. Please describe the problem you are facing.🙂

  3. Carbon says:

    PDF rendering is nice, but it’s somewhat useless without control over the Acrobat window itself. Specifically, how do you add/remove the acrobat controls to create a more seamless integration with Flash?

  4. Sujit Reddy G says:

    I don’t think you can render the PDF content without displaying the acrobat controls. I will try to find out if there is a way to do this. I will let you know if i find out a way to do this🙂

  5. Ryan says:

    I like the idea but I just cant seem to get it to work. I get a black screen. By the way I am using Flex 3 Air.

  6. Sujit Reddy G says:

    When are you getting this black screen? is it coming when u r trying to render the PDF or the image? Can you also check out if the loading is completed using the complete event of the loader.

  7. Ryan says:

    I would not really call that “rendering” a pdf – it looks like adobe reader is just displaying it inside the window. I am in a situation where I really need to actually render multiple pdf files in a window. I’m not talking multiple page pdf files. I’m talking about graphics in pdf format that I need to display just like you would a jpeg or something. I think Apple’s Safari supports such an idea for svg files now. And I don’t want adobe reader to have to load every time. If anyone knows if you can do this and how, I’d love to hear it!

  8. Sujit Reddy G says:

    Hi all,

    Please check out the URL below for more details on PDF with AIR

    http://livedocs.adobe.com/labs/flex3/html/help.html?content=PDF_1.html

    Hope this helps.

  9. Sid says:

    Thanks. That was useful.

  10. SR says:

    Hello Sujit, I am creating a widget using FlashCS3/AIR and I have a requirement to load a online pdf document inside the widget. I tried your code but the pdf is coming as a black window. Any other html pages are coming properly but still no success in loading a pdf document. If you have any idea why the pdf doc is coming as black. Thank you

  11. Sujit Reddy G says:

    Hi SR,

    Please try handling the “complete” event of the HTMLLoader to make sure the loading of the document is complete.

    Hope this helps

  12. Jayesh says:

    Sombody here commented that he is getting Blank screen After PDF is rendered. It happens if the following in the app.xml file is set, comment them out and it should work. In transparent applicaiotn window, it displays as Balnk screen.

    <!–none–>
    <!–true–>

  13. ohh HTML didnt display properly in my previous comment.
    you should not use Transparent window that the moral of the story

  14. leo says:

    Hello Sujit,
    i stil new in flex, do u mind give us the fullcode or example.

    thx

  15. gate says:

    Not work for me …
    White screen …

    Gate

  16. TypeError: Error #1034: Type Coercion failed: cannot convert flash.html::HTMLLoader@3937239 to mx.core.IUIComponent.

  17. Sujit Reddy G says:

    Hi,

    You need to wrap the HTMLLoaded in a UIComponent as in the code above.

    Hope this helps.

  18. dayg says:

    You might be interested also in this short post I had for PDF rendering in AIR.

    HTH.

  19. Mohamed rafi says:

    Is it possible to implement the same in web application.

  20. Sujit Reddy G says:

    Hi rafi,

    No, you cannot do the same in a web application. Few people use IFrame to render PDF. Please try searching for Flex + Iframe.

    Hope this helps.

  21. Hello Sujit,

    Thank you for your forum.

    I’m trying to build an application that will allow me to view pdfs when they are selected from a datagrid. I’m new to Flex/Air and I’m having trouble getting the Reader to change the pdf after the first one is loaded.

    Here is my code:

    Any ideas? Can I use the locationChange or removeChild properties? I’ve tried but keep getting errors.

    Thank you.
    Jerry

  22. Sujit Reddy G says:

    Hi Jerry,

    You code got truncated. Please try to send ur code to sujitreddy.g@gmail.com

  23. adobe user says:

    re hiding Acrobat controls: If you have a copy of Acrobat (not Reader) you can set the document preference to hide the toolbar when the file’s opened — this is something you save as part of a specific PDF file though. Hopefully this works as I’ll be trying something similar soon.

  24. Andy Jenn says:

    Thanks a lot for the example Sujit – how do I “add it to any container”? e.g. Window as per the screenshots at the top of the page?
    Many thanks.

  25. alaguvelp says:

    Thanks for the example. Is that possible to set the wmode transparent through htmlLoader?

  26. Justin S says:

    Is there a sample project somewhere?

    I am not sure what objects to place on my form or if there are any libaries in particular that need using.

  27. Vaishali says:

    Hi Sujit,

    I am getting the same issue blank screen.

    I am not sure whether this question belong in this forum.. But If anyone has used jasperserver with Adobe air please help me..

    I have my application build in Adobe Air and one of the feature is to show the reports. I am able to see the report properly on adobe air when I pass the url through Iframe. But when I pass the URL with Output=pdf or when I click the pdf icon from jasper report, opens a new adobe air window with a black screen and this happens for all the different exports ie excel…. When I use the same application by triggering in IE, Firefox or Google chrome, it opens a new window or tab and shows me the pdf version.

    So I need help either to get me the pdf in that new adobe air window or open in the users deafult browser that pdf.

    So what code should I be changing… As I cannot debug and not getting any error on my Tomcat also…

    I will send you the screen shots also…

  28. peter says:

    Hi, i wonder if someone can tell me how i close the pdf-file after i’ve opening it?

    Thanks

    // P

  29. Mahesh says:

    Isnt there a way to render PDFs with in the Flex WebApps??
    HTMLLoader is avail only in AIR not in Flex Web apps. But using iFrames in Enterprise apps is not secured… Is there any other way.. Why Adobe hasnt provide components for Flex webapps like AIRs..

  30. Hilda Thompson says:

    Hello guys, I need to resize an image in a PDF document. How do I do it?

  31. Patrick Taylor says:

    Yes, you can actually do it. There is simple software called Magic PDF. If you want to check it out, go to http://www.magic-PDF.com. Good luck – Patrick

  32. Jeremy says:

    Does anybody know of any work arounds to display a pdf in a transparent window?

  33. karthick says:

    hi friend, i have done it. but i need to edit and save the pdf files. how should i do? pleas help me.

  34. AdobeLover says:

    How do I open a PDF file from the local machine (instead of a web server via HTTP) in the AIR app?

  35. Ploem says:

    Hmm when upgrading Reader to 9.2.0 the pdf’s fail to load in Adobe AIR. Anyone who runs into this issue as well?

  36. Steve says:

    @Ploem I have the same problem with Reader 9.2. Please vote for my bug… http://bugs.adobe.com/jira/browse/SDK-23757

  37. chintan says:

    Jermey, workaround for transparent windows is to open a new window with PDF.

    var options:NativeWindowInitOptions = new NativeWindowInitOptions();
    options.systemChrome=”standard”;
    options.transparent=false;

    var windowBounds:Rectangle = new Rectangle(20,20,Capabilities.screenResolutionX/1.6,Capabilities.screenResolutionY/1.6);

    var htmlLoader:HTMLLoader = HTMLLoader.createRootWindow(true, options, true, windowBounds);

    htmlLoader.load(url);

  38. @ploem & steve
    Thanks…i was searching for a reason at my problem, my app was correctly working few weeks ago, and yesterday it was impossible to open pdf..and i haven’t notice that i’d upgrade acrobat reader !
    Yeahhhh

  39. Ken says:

    Anyone found a workaround or patch for the bug with 9.2.0?

  40. Ken says:

    Found the workaround for the 9.2.0 bug… had to update to the latest AIR runtime and update the AIR SDK to the latest.

  41. srinath says:

    I have create a Html base AIR Application, this app uses xml and flash (AS 2 scripting), xml for dynamic content. “Service Datasheet” the above html code is used to open a pdf file, issues is that the pdf opens in same window. is it possible to open in PDF reader or new native window

  42. Renan Huanca says:

    Hi,

    I just want to share my experience.

    I have try the code, and I was also getting a white screen, so i checked the transparency attribute but with no success. Also I have tried to change the Flex SDK, but with no success too.

    So at the end I have reinstalled my adobe reader to 9.3, and that worked.

    I don’t know if my adobe reader was incompatible, but it worked.😄

  43. Amit says:

    You can use add #toolbar=0 to url of pdf to hide the toolbar. Tested it with Acrobat.

    var request:URLRequest =
    new URLRequest(“c:/test.pdf#toolbar=0”);

  44. Amit says:

    You can get the complete list of pdf open parameters here

    http://www.adobe.com/devnet/acrobat/pdfs/pdf_open_parameters.pdf

  45. Julien says:

    That saved my life ! Thank you guys🙂

  46. Benjamin says:

    Hi,
    the open PDF Parameter seem not to work when using it in local file system.

    So
    var request:URLRequest = new URLRequest(“file://users/kate/galois.pdf#toolbar=0&navpanes=0”);

    is not working, it still shows toolbar and so on,
    while this is working correct:

    var request:URLRequest = new URLRequest(“http://www.dpmms.cam.ac.uk/study/II/Galois/Galois.pdf#toolbar=0&navpanes=0”);

    Does somebody has an idea or solution ?

  47. Seance says:

    @Benjamin,

    Have you found a solution to applying the open parameters to a local file system URL?

    I could use this too. Any help appreciated!

  48. Benjamin says:

    @Seance.
    Unfortunately no. I didnt find anything.
    If you do, let us know.

    Benjamin

  49. greg says:

    chintan, your right about the transparency setting in the app.xml. Good find, was driving me crazy!

  50. abhishek says:

    hey frnds,
    can we give print functionality to our pdf.
    Means can we show multiple pages pdf in air and allow user to print single page or whole pdf ?
    thx in advanced,🙂

  51. #

    hintan, your right about the transparency setting in the app.xml. Good find, was driving me crazy!
    #
    abhishek says:
    July 1, 2010 at 11:03 am

    hey frnds,

  52. Katie says:

    Hiya, All seems to be working fine loading my pdf in a new window but when I close the window containing the pdf another blank window appears in its place with title “about:blank”. I might be being silly but I can’t see why this is? Anyone had a similar problem?

    private var pdf:HTMLLoader = new HTMLLoader();

    if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK)
    {
    var url:URLRequest = new URLRequest(file.url);
    pdf.width=this.mainUI.app.stage.nativeWindow.width;
    pdf.height=this.mainUI.app.stage.nativeWindow.height;
    pdf.load(url); pdf.addEventListener(Event.COMPLETE, loadPDF);
    }

    protected function loadPDF(event:Event):void
    {
    var holder:UIComponent = new UIComponent();
    holder.percentHeight = 100;
    holder.percentWidth = 100;

    var newWindow:Window = new Window();
    newWindow.systemChrome = NativeWindowSystemChrome.STANDARD;
    newWindow.transparent = false;
    newWindow.title = pdf.location;
    newWindow.width = this.mainUI.app.stage.nativeWindow.width;
    newWindow.height = this.mainUI.app.stage.nativeWindow.height;
    newWindow.open(true);

    pdf.width = holder.width;
    pdf.height = holder.height;

    holder.addChild(pdf);
    holder.addEventListener(ResizeEvent.RESIZE, scalePDF);
    newWindow.addChild(holder);
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: