aMazing aMazing - 6 months ago 276
JSON Question

EXTJS How to display/open the PDF file that is a result of server response

How do I open/view/download the PDF file that server has returned.

I did some research but couldnt find anything that could apply in my scenario.
I have a button Print under the grid that will hit the server and the server will create a PDF file and send it back.

When I use the URL


localhost/HeadOffice/branchTransfer/downloadreprintfile/27500031/275


on the browser address bar, I can successfully open the pdf file instantly. However not when I am clicking the button. I get a WARNing message which is quite obviuos:


[WARN] Unable to parse the JSON returned by the server


Here is my .Net code for creating the file.

public Stream DownloadReprintFile(string transferId, string branchId)
{
string fileName = GetFullReprintFilePath(transferId, branchId);
if (!File.Exists(fileName))
{
Reprint(transferId, branchId);
}

WebOperationContext.Current.OutgoingResponse.ContentType = "application/pdf";
return File.OpenRead(fileName);
}


Code for Store and proxy and JSON reader

Ext.define('BranchTransferDashboard.store.PrintStore', {
extend: 'Ext.data.Store',

requires: [
'BranchTransferDashboard.model.PrintModel',
'Ext.data.proxy.Rest'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'PrintStore',
model: 'BranchTransferDashboard.model.PrintModel',
proxy: {
type: 'rest',
headers: {
Accept: 'application/pdf',
'Content-Type': 'application/pdf'
},
}
}, cfg)]);
}
});


Print Button click code

console.log('Print Button Click');
var printStore = Ext.getStore('PrintStore');
var url = BranchTransferDashboard.globals.url + 'branchTransfer/downloadreprintfile/'+ this.activeRecord.transferId + '/' + this.activeRecord.sender;
printStore.proxy.url = url;
console.log(url);

printStore.load({
scope : this,
callback: function(records, operation, success) {
if (success){

}
}
});

Answer

Following is the ExtJS code that works perfectly fine and pops open the PDF file.

//var printStore = Ext.getStore('PrintStore');
var url = MyApp.globals.url + 'myApp/downloadreprintfile/'+ this.activeRecord.transferId + '/' + this.activeRecord.sender;
//printStore.proxy.url = url;

var printPanel = Ext.create('Ext.form.Panel', {
  title:'Print Panel',
  id: 'printTabPanel',
  standardSubmit: true,
  layout: 'fit',
  timeout: 120000
});

printPanel.submit({
             target : '_new',
             url  : url
            });

P.S. My request is a POST request.

Comments