EXTJS 서버 응답의 결과 인 PDF 파일을 표시/열기하는 방법

Question

서버가 반환 한 PDF 파일을 열거 나 보거나 다운로드하려면 어떻게해야합니까?

나는 약간의 조사를했지만 내 시나리오에는 적용 할 수있는 것을 찾지 못했습니다. 서버에 충돌하는 그리드 아래에 버튼 인쇄가 있습니다. 그러면 서버가 PDF 파일을 만들어 다시 전송합니다.

나는 즉시 URL을

로컬 호스트 /의 headoffice/branchTransfer가/downloadreprintfile/27500031 브라우저 주소 표시 줄에

/275, I 성공적으로 열 수있는 PDF 파일을 사용

. 그러나 내가 버튼을 클릭 할 때 아닙니다.

가 [WARN] 서버

여기에 파일을 만들기위한 내 닷넷 코드가에 의해 반환 된 JSON을 구문 분석 할 수 없습니다 : 꽤 obviuos하는 경고 메시지가 표시됩니다. 저장 및 프록시와 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)]); 
    } 
}); 

인쇄 버튼 클릭 코드

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

코드

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. 내 요청은 POST 요청입니다.

Answer 2

나는 비슷한 짓을했는지, 내가 iframe이를 사용 . DOM에 숨겨진 iframe이 있고 사용자가 다운로드를 트리거하면 내 응답을 생성하는 서비스에 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 
     } 
    }); 
}