Embedding PDFs in iframes

[Max Carey]

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

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?

[hendricd]

@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.

 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.

[Eric24]

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.

[hendricd]

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.

[Max Carey]

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.

[Max Carey]

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?

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(); 
});

[hendricd]

@Max -- See your post revised.

[Max Carey]

I also tried it without

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?

[hendricd]

If you don't specify height/width, something has to:

mediaCfg: {  
            mediaType: 'PDF', 
            autoSize : true,
            url: '../myPDF.pdf',
            unsupportedText: 'Acrobat Viewer is not installed',
            controls: true
        }

Even easier:

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(); 
});