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

Question

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 1

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.

Answer 2

I've done something similar, and I use an iframe. I have an iframe hidden in the DOM, and when the user triggers a download I set the src attribute of the iframe to the service that generates my response. You will also want to set the Content-Disposition header on the server. The response header should look something like this:

Content-Disposition: attachment; filename="Report.pdf" 

Answer 3

Server side

In the server side once you generate the report, you should set the following headers

headers.setContentType(MediaType.parseMediaType("application/pdf"));
headers.setContentDispositionFormData("inline", "Report.pdf");

Client side: The following code used to download the file using extjs. Add the following code to method and invoke this for button action. PDF will be opened in new tab.

If you want to open the file in new tab Invoke the following code for button action.

    /**
 * open file in tab
 */
openReport: function () {
    var url = 'downloadURL';
    Ext.Ajax.request({
        url: url,
        method: 'GET',
        autoAbort: false,
        success: function(result) {
            if(result.status == 204) {
                Ext.Msg.alert('Empty Report', 'There is no data');
            } else if(result.status == 200) {
                var win = window.open('', '_blank');
                win.location = url;
                win.focus();
            }
        },
        failure: function() {
            //failure here will automatically
            //log the user out as it should
        }
    });
}