PDA

View Full Version : show PDF in Ext.Window



_PASCAL_
14 Jun 2012, 11:38 AM
Hi,

sorry for my bad english /:)

I want to show a pdf document. Therefore I want to use a Ext.Window.

Firstly I get the pdf with an Ajax Request


Ext.Ajax.request({

params: {
session_id: gfa.gfaGlobals.session_ID,
rnummer: rechNummer
},

url: 'back/pdf?action=getPdf',

success: function(resp){

var winpdf1 = new Ext.Window({
title: 'PDF Content',
width: 420,
height: 320,
plain:true,
html: '<iframe src="' + resp + '" width="400" height="300" />'
})

winpdf1.show();

}

});

After that I don't know how to get the data into the iFrame.
Ist it possible?

I cannot access the pdf File through an URL ... I need to load the pdf via servlet ajax request.

Are there any other ideas to do that?

I have seen the Ext.media.ux plugin but I think it's only for extjs 2.2 and below

greeting
Pascal

scottmartin
14 Jun 2012, 6:09 PM
Here is a good online example:
http://ext4all.com/post/extjs-4-show-pdf-in-a-panel

Scott.

_PASCAL_
14 Jun 2012, 9:28 PM
thanks scott

but I get the PDF like



%PDF-1.4 %����� 1 0 obj << /Type /XObject /Subtype /Image /Filter /FlateDecode /Width 100 /Height 100 /ColorSpace /DeviceGray /BitsPerComponent 8 /Length 303 >> stream x���� �0P�B-��ZR�P-�,R��|�3sp<g�i�%��7��r�ot������/t3.�.�v���z�Vi��� ���f�pT%B��C`D)Jč kD0C��!��A���A"�!1L@H�T�V�aBbl�4��6�������(ߨA�]2�e.*Y,�˺ �:�l��v��eH����_I��HF|��8����b(���H����(�-� �H��!ٳaQ8NEy���|�����A��J�Ј���B.Ѣ4 UJ����<eV��u|7?��� 3 endstream endobj 2 0 obj << /Type /XObject /Subtype /Image /Filter /FlateDecode /SMask 1 0 R /Width 100 /Height 100 /ColorSpace /DeviceRGB /BitsPerComponent 8 /Length 19486 >> stream x�̽X\[�-����>�������]$$$�($Dpw��$Xpw� �� ����ݷ�}w}�����{�1�s���1����ر���ͷ3ӓ�͍����%�i�I �ٙ���YY))I99Y����==]���>|xw�{��#�5�|�r��nkl|�yۋg5��Mm�ϻ_��-�N�M;�^|7��5��9>�vtvcl�����S��b��l�����-�Cã++k�>}�?��_�O� ���B{�



as an outputstream from JAVA...How do I get this in an iFrame src?

I tested this butwith no success ...

I only get an file save dialog ...



var fp = new Ext.form.FormPanel({
fileId: 'abc',
type: 'pdf',
standardSubmit: true,
url: 'back/pdf?action=getPdf',
method: 'POST'

});

var baseParams = {
session_id: gfa.gfaGlobals.session_ID,
rnummer: rechNummer
};

// check if there are baseParams and if
// hiddent items have been added already
if (!fp.paramsAdded) {
// add hidden items for all baseParams
for (i in baseParams) {
fp.add({
xtype: 'hidden',
id: fp.id+'_'+i,
name: i,
value: baseParams[i]
});
}
// set a custom flag to prevent re-adding
fp.paramsAdded = true;
}

var pdfwin = Ext.create('Ext.window',{
title: 'My PDF',
width: 600,
height: 400,
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: fp.form.submit()
}
}
});

pdfwin.show();

mayur_satasiya
21 Jun 2012, 9:20 PM
Here is a good online example:
http://ext4all.com/post/extjs-4-show-pdf-in-a-panel

Scott.

Hi Scott,Thanks for live example and it's working on eclipse IDE but fail on all other browses. So please help me thanks in advance.

scottmartin
22 Jun 2012, 7:30 AM
Can you please be more specific as to how this is not working?

This seems to work fine .. do you have PDF plugin install in your browser?



Ext.onReady(function () {
Ext.widget('panel', {
title: 'My PDF',
width: 600,
height: 400,
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: 'css3-cheat.pdf'
}
},
renderTo: Ext.getBody()
});
});


Regards,
Scott

mayur_satasiya
22 Jun 2012, 7:36 AM
Can you please be more specific as to how this is not working?

This seems to work fine .. do you have PDF plugin install in your browser?



Ext.onReady(function () {
Ext.widget('panel', {
title: 'My PDF',
width: 600,
height: 400,
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: 'css3-cheat.pdf'
}
},
renderTo: Ext.getBody()
});
});


Regards,
Scott
Hi, Scott I have used same code for displaying PDF to window, but while i run project in Eclipse IDE it's perfectly display PDF file on window, but while i copy that prohect link and pest in browser addressbar i can't see PDF file content just able to see frame only and in frame there is a message can't load browser specific things. It's recommended to add PDF plugin or not. Thanks in advance.

And Scott One more thing is that I want to implement like below.
1) i want to see all the files list on window or panel (PDF,Excel,Docs) as a link
2)on click on link i want to open that files in new tab in window
how to achieve this please help me , Thanks in advance

scottmartin
22 Jun 2012, 7:41 AM
You will need a plugin ... same as you would need to view PDF in browser page inline.

Scott.

mayur_satasiya
22 Jun 2012, 7:44 AM
You will need a plugin ... same as you would need to view PDF in browser page inline.

Scott.

But i can see PDF files in Browser but can't on ExtJS Window or panel

scottmartin
22 Jun 2012, 7:51 AM
When you say all other browsers, what have you tested .. have you tried on another PC?
This should be working, so I you may need make some basic tests.

Scott.

mayur_satasiya
22 Jun 2012, 7:59 AM
But what about other files like xls and docx etcc.. thanks in advance

scottmartin
22 Jun 2012, 8:03 AM
Since this is loaded in an iframe, the browser will have to support those plugins as well.

This may be of interested, but not tested: (several formats supported)
http://blog.arpitnext.com/gpdf

Scott.

mayur_satasiya
22 Jun 2012, 8:14 AM
Can you please be more specific as to how this is not working?

This seems to work fine .. do you have PDF plugin install in your browser?



Ext.onReady(function () {
Ext.widget('panel', {
title: 'My PDF',
width: 600,
height: 400,
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: 'css3-cheat.pdf'
}
},
renderTo: Ext.getBody()
});
});


Regards,
Scott

Thanks Scott,
wow its working in chrome. thank you very much

Mayur

mayur_satasiya
22 Jun 2012, 9:57 PM
Hi, Scott i had talk to you that your code is not working in firefox, i have added plugin and i am getting error show in image attached please help me thanks in advance.36477

mayur_satasiya
22 Jun 2012, 11:20 PM
When you say all other browsers, what have you tested .. have you tried on another PC?
This should be working, so I you may need make some basic tests.

Scott.

HI Scott I have tested in my system and others as well but i can't see PDF file on panel or window of extjs, and it's load just panel as shown in attached file but in chrome and IE it just shows panel with out any error, i have already install plugin. and is there any way to use gpdf plugin in extjs and how to use that plugin in extjs. please help me thanks in advance.36480

scottmartin
23 Jun 2012, 5:24 AM
I understand your problem, but I am not sure what is happening on your system, as I am able to run the examples on my Mac and Linux boxes.

Have you tried this on another system?

Scott.

mayur_satasiya
23 Jun 2012, 7:09 AM
I understand your problem, but I am not sure what is happening on your system, as I am able to run the examples on my Mac and Linux boxes.

Have you tried this on another system?

Scott.
Yes i have check in other system also but same problem. Please help me what to do.I have also post that error image. please see it and say what is the Original problem with system browser. Thanks in advance.

Mayur

scottmartin
23 Jun 2012, 7:30 AM
The issue seems to be with the plugin itself when working with FF.

As mentioned, since you where not able to load the PDF using the default methods provided by the default PDF browser plugin, I suggest that you see if gPDF would help. I have no experience with this plugin and since it seems to be specific to this plugin with FF, you will need to contact their support team.

Scott.

Narat
20 Aug 2013, 2:01 AM
Is it possible to load PDF to panel contet with LOADER?


loader: {
url: '/files/pdf-sample.pdf',
renderer: 'html',
autoLoad: true,
scripts: false
}

I tried, but got only PDF code:
%PDF-1.5 %.............. etc.

Another question: how can I catch the end of loading moment, when using iframe?

As for loader, I can do like this:

onDocLoad: function(loader, response, options, eOpts ) {
alert('panel loaded!!!');
}

................

pnl.loader.on('load', this.onDocLoad, this);

Please, help me!