1. #1
    Ext User
    Join Date
    Jun 2008
    Posts
    13
    Vote Rating
    0
    Max Carey is on a distinguished road

      0  

    Default Embedding PDFs in iframes

    I'm using an Ext.ux.ManagedIFrame. Some of the time I want it to display HTML, but some of the time I want to display a PDF that gets streamed to me by the server. I've looked through the forums and haven't found a simple example that I can understand.

    I tried calling
    Code:
    myIFrame.load(url, params);
    but it didn't load anything. I checked in firebug and got a response, so I don't know why this wouldn't display the pdf. Do I need to render the component after calling the load method (I call doLayout() on the parent container)? If so, how exactly would I do this? If not, how exactly can I get the iframe to load and show the pdf?

  2. #2
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    @Max --
    MIF.load uses Ext.Updater to write content into the frame document. Not what you want I think. MIF.setSrc('myReport.html') would load an entire page into the frame (from any domain) as a standard web-page. Your response would need the markup necessary to properly embed an <OJBECT> tag capable of rendering Acrobat inline within that page.

    I would recommend you have a look at ux.Media classes (see my sig below) rather than MIFPanel. Using this example, you can just request the PDF file itself and have it rendered directly into a standard Ext.Panel or Window.

    Code:
     var p = new Ext.ux.MediaPanel({
            id:'PDFViewer',
            renderTo: document.body,
            height: 400,
            width : 600,
            mediaCfg:{
                mediaType   :'PDF'  
               ,url         :'your.pdf'
               ,unsupportedText : 'Acrobat Viewer is not Installed'
               ,params      :{page:2}
               }
          });
    Much easier.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    534
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default

    Just out of curiosity, using MIF, would it not be possible to simply do setSrc('{url}/myReport.pdf')? That way, Max can choose either html or pdf by simply specifying the "base" document in setSrc.

  4. #4
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    You likely could, but then you'd have to manage Content-Disposition headers server-side. Depending on the setting he may get a Save-as dialog, or Acrobat may launch externally.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Ext User
    Join Date
    Jun 2008
    Posts
    13
    Vote Rating
    0
    Max Carey is on a distinguished road

      0  

    Default

    Unfortunately, I cannot simply set src to some location on the server, because the pdf's that i'm generating contain sensitive information, and are therefore not web-readable. What I can do is stream a pdf from the server and use that, but I'm not sure how to display it. I'll take a look at MediaPanel, that looks promising.

  6. #6
    Ext User
    Join Date
    Jun 2008
    Posts
    13
    Vote Rating
    0
    Max Carey is on a distinguished road

      0  

    Default

    Alright, mediapanel seems the way to go. But I'm still having trouble getting anything to render in the panel. What's wrong with this?

    Code:
    Ext.onReady(function() {
        var pdfViewer = new Ext.ux.MediaPanel({
            id: 'pdfViewer',  
            renderTo: document.body, 
            
            mediaCfg: {  
                mediaType: 'PDF', 
                url: '../myPDF.pdf',
                unsupportedText: 'Acrobat Viewer is not installed',
                controls: true
            } 
        }); 
         
        var win = new Ext.Window({ 
            title: 'PDF Viewer',
            layout: 'fit', 
            height: 400, 
            width: 600,  
            items: pdfViewer  
        }); 
         
        win.show(); 
    });

  7. #7
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    @Max -- See your post revised.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #8
    Ext User
    Join Date
    Jun 2008
    Posts
    13
    Vote Rating
    0
    Max Carey is on a distinguished road

      0  

    Default

    I also tried it without
    Code:
    renderTo: document.body
    and had the same issue. As a sanity check, I tried loading a .gif into the media panel, and it worked just fine. What is it about a PDF that could cause this?

  9. #9
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    If you don't specify height/width, something has to:
    Code:
    mediaCfg: {  
                mediaType: 'PDF', 
                autoSize : true,
                url: '../myPDF.pdf',
                unsupportedText: 'Acrobat Viewer is not installed',
                controls: true
            }
    Even easier:
    Code:
    Ext.onReady(function() {
         
        var winPDF = new Ext.MediaWindow({ 
            title: 'PDF Viewer',
            height: 400, 
            width: 600, 
            mediaCfg: {  
                mediaType: 'PDF', 
                autoSize : true,
                url: '../myPDF.pdf',
                unsupportedText: 'Acrobat Viewer is not installed', //use PDF profile defualts
                controls: true
            } 
     
             
        }); 
         
        win.show(); 
    });
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


Thread Participants: 2