PDA

View Full Version : How display/embed a PDF returned from a JAVA servlet in an extjs component?



simonr26
30 Apr 2013, 5:31 PM
I require to display/embed a PDF file returned from a JAVA servlet into an extjs 4
widget (probably an iframe).
I have Adobe Acrobat Reader plugin installed.
The code below frequently works - i.e. it currently works using Chrome and also using
firefox on Windows.
When run on a linux server using firefox, a popup file dialog appears asking whether
I want to Open or Save the file, and the PDF is not embedded in the frame.
I am not sure if the problem is platform-related?

Note that I don't want to use <iframe src="<url>"> as seen in other questions
(e.g. ExtJS 4: Show Pdf In A Panel by Vitaly on April 12 2012) on this subject since
the file does not exist under the webapps root folder but in a different disk area.

Please can you advise on whether the ext js is correct and what should be returned
from servlet?


Kind regards,
Simon




extjs code:

Ext.define('App.view.Viewport', {
extend:'Ext.container.Viewport',
...
{
id:'card-2',
xtype:'panel',
layout:'border',

items:[
...

{
xtype:'PdfViewer',
region:'east'
}



Ext.define('App.view.PdfViewer', {
extend:'Ext.panel.Panel',
alias:'widget.PdfViewer',
layout: 'fit',
collapsible:true,
collapsed:true,
resizable:true,
width: 320,
id: 'pdf-comp',
items: {
xtype: 'component',
id: 'iframe-win',
autoEl: {
tag: 'iframe',
src: ''
}
}

});


Ext.define('App.view.PdfGrid' ,{
extend: 'Ext.grid.Panel',
id: 'pdflist'
...
columns : [{
...
xtype : 'actioncolumn',
align: 'center',
width: 100,
items: [{
icon: 'previewpdf.png',
tooltip: 'Preview PDF',
handler: function(grid, rowIndex, colIndex) {

var g = Ext.getCmp('pdflist');
var rec = g.store.getAt(rowIndex);
var par=+rec.get('id');
var p = Ext.getCmp('pdf-comp');
p.expand();

Ext.getDom('iframe-win').src = "inline/pdfview.action?id="+par;
}

}],
...

servlet code:
@RequestMapping(value="/inline/pdfview.action", method = RequestMethod.GET)
public void pdfview(@RequestParam int id, HttpServletRequest request, HttpServletResponse response) throws Exception {

byte[] buffer=null;

try {

String pdfFilename = "test.pdf"; // I use id here to determine pdf
File f = new File(pdfFilename);

BufferedInputStream is = new BufferedInputStream(new FileInputStream(f));
ByteArrayOutputStream bos = new ByteArrayOutputStream((int)f.length());

int ch;
long actual=0;
while((ch=is.read())!=-1){
bos.write(ch);
actual++;
}
bos.flush();
bos.close();
buffer=bos.toByteArray();

response.getOutputStream().write(buffer, 0, buffer.length);

}
catch (Exception e) {
e.printStackTrace();
}
}

firefoxSafari
1 May 2013, 1:12 AM
How is the MIME type being set? I think it should be application/pdf - would expect to see something like this is the code:

response.setContentType("application/pdf");

I suppose your server could be trying to set it, too - I'd use a network monitoring tool like Fiddler to see the headers coming back from the server and make sure the MIME type is appropriate.

I could see where maybe missing this could cause the browser to misinterpret the content.

simonr26
2 May 2013, 9:36 AM
Thank you - your suggestion worked

existdissolve
2 May 2013, 9:41 AM
Thank you - your suggestion worked

FYI, there is a iFrame component available under UX: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.ux.IFrame