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ブラウザでのみ動作します。 Chromeでは空のウィンドウが表示されます。だから、二つの質問（自分自身に答えることはできません）：

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