ExtJS 4 및 BLOB에서 PDF 표시

Question

PDF 스트림을 별도의 창에 표시하려고하며이 스트림은 데이터베이스 BLOB 필드에 있습니다. 내 코드는 다음과 같습니다.

Ext.define('MyApp.view.ViewPDF', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.mywindow', 

    requires: [ 
     'Ext.toolbar.Toolbar', 
     'Ext.button.Button' 
    ], 

    config: { 
     title: '', 
     source: '' 
    }, 

    itemId: 'SHOW_PDF', 
    closable: false, 
    resizable: true, 
    modal:  true, 

    onClose: function (clsbtn) { 
     clsbtn.up('window').destroy(); 
    }, 


    initComponent: function() { 
     var my = this; 

     Ext.apply(my, { 
      items: [ 
       { 
        xtype: 'panel', 
        layout: 'fit', 
        width: 640, 
        height: 780, 
        items: [ 
         { 
          items: { 
           xtype: 'component', 
           align: 'stretch', 
           autoEl: { 
            tag:  'iframe', 
            loadMask: 'Creating report...please wait!', 
            style: 'height: 100%; width: 100%; border: none', 
            src:  'data:application/pdf;base64,' + tutaj.getSource() 
           } 
          } 
         } 
        ] 
       } 
      ], 
      dockedItems: [ 
       { 
          xtype: 'toolbar', 
          dock: 'bottom', 
          height: 30, 
          items: [ 
           '->', 
           { 
            xtype: 'button', 
            baseCls: 'x-btn-default-large', 
            cls:  'cap-btn', 
            handler: my.onClose, 
            width: 55, 
            margin: '0, 10, 0, 0', 
            style: 'text-align: center', 
            text: 'Close' 
           } 
          ] 
         } 
        ] 
     }); 
     my.callParent(); 
     my.title = my.getTitle(); 
    } 
}); 

이며 FireFox 브라우저에서만 작동합니다. 크롬에서는 빈 창이 보입니다. 그래서 두 가지 질문 (자신을 대답 할 수없는) :

1. 방법 다른 브라우저 위의 loadMask 때문에 코드에서 마스크 텍스트를 표시 수 없습니다하는 방법

2. 에서이 PDF 스트림을 표시하기 위해 위의 수정 작업; PDF가 표시 될 때 창을 열어서 끝내기 만하면 텍스트를 표시합니다.

이 코드의 잘못된 점을 알려주 시렵니까?

Answer 1

filefield, BLOB 및 FileReader을 사용하여 FIDDLE을 만들었습니다. 나는 chrome과 Fire Fox에서 테스트를 마쳤습니다. 이 FIDDLE가 도움이되거나 문제를 해결할 수 있기를 바랍니다.

코드 스 니펫

Ext.create('Ext.form.Panel', { 
    renderTo: Ext.getBody(), 
    height: window.innerHeight, 
    title: 'Iframe Example for PDF', 
    bodyPadding: 10, 

    items: [{ 
     xtype: 'fileuploadfield', 
     buttonOnly: true, 
     buttonText: 'Choose PDF and show via BLOB', 
     listeners: { 
      afterrender: function (cmp) { 
       cmp.fileInputEl.set({ 
        accept: '.pdf' 
       }); 
      }, 
      change: function (f) { 
       var file = document.getElementById(f.fileInputEl.id).files[0]; 
       this.up('form').doSetPDF(file); 
      } 
     } 
    }, { 
     xtype: 'fileuploadfield', 
     buttonOnly: true, 
     buttonText: 'Choose PDF and show via BASE64 ', 
     listeners: { 
      afterrender: function (cmp) { 
       cmp.fileInputEl.set({ 
        accept: '.pdf' 
       }); 
      }, 
      change: function (f) { 
       var file = document.getElementById(f.fileInputEl.id).files[0]; 
       this.up('form').doSetViaBase64(file); 
      } 
     } 
    }, { 
     xtype: 'box', 
     autoEl: { 
      tag: 'iframe', 
      loadMask: 'Creating report...please wait!', 
      width: '100%', 
      height: '100%' 
     } 
    }], 

    //Show pdf file using BLOB and createObjectURL 
    doSetPDF: function (file) { 
     if (file) { 
      var form = this, 
       blob, file; 

      if (Ext.isIE) { 
       this.doSetViaBase64(file) 
      } else { 
       blob = new Blob([file], { 
         type: 'application/pdf' 
        }), 
        file = window.URL.createObjectURL(blob); 

       form.getEl().query('iframe')[0].src = file; 
      } 
     } 
    }, 
    //Show pdf file using BASE64 
    doSetViaBase64: function (file) { 
     var form = this, 
      reader = new FileReader(); 

     reader.readAsDataURL(file); 
     reader.onload = function() { 
      form.getEl().query('iframe')[0].src = this.result; 
     }; 
     reader.onerror = function (error) { 
      console.log('Error: ', error); 
     }; 
    } 
});