EXTJS Как отобразить/открыть файл PDF, являющийся результатом ответа сервера

Question

Как открыть/просмотреть/загрузить файл PDF, который был возвращен сервером.

Я провел некоторое исследование, но не смог найти ничего, что могло бы применяться в моем сценарии. У меня есть кнопка Печать под сеткой, которая попадет на сервер, и сервер создаст файл PDF и отправит его обратно.

Когда я использую URL-адрес

локальный/HeadOffice/branchTransfer/downloadreprintfile 27500031/275

на адресной строке браузера, можно успешно открыть файл/PDF мгновенно. Однако не когда я нажимаю кнопку. Я получаю предупредительное сообщение, которое довольно obviuos:

[WARN] Невозможно разобрать JSON, возвращаемый сервером

Вот мой код .NET для создания файла.

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

Код для магазина и прокси-сервер и считывателем JSON

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

печати Кнопка пунктКодЧтобы

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

Ниже приведен код ExtJS, который отлично работает и открывает файл PDF.

//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. Мой запрос - запрос POST.

Answer 2

Я сделал что-то подобное, и я использую IFRAME , У меня есть iframe, скрытый в DOM, и когда пользователь запускает загрузку, я устанавливаю атрибут iframe src для службы, которая генерирует мой ответ. Вы также захотите установить заголовок Content-Disposition на сервере. Заголовок ответа должен выглядеть примерно так:

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

Answer 3

стороне сервера

В стороне сервера, как только вы создать отчет, вы должны установить следующие заголовки

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

стороне клиента: Следующий код используется для загрузки файла с помощью ExtJS. Добавьте следующий код в метод и вызовите его для действия кнопки. PDF будет открыт на новой вкладке.

Если вы хотите, чтобы открыть файл на новой вкладке Вызовите следующий код для действия кнопки.

/** 
* 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 
     } 
    }); 
}