2017-12-12 6 views
0

PDFストリームを別のウィンドウに表示しようとしましたが、このストリームはデータベースのBLOBフィールドからのものです。私のコードは次のとおりです:ExtJS 4とBLOBからPDFを表示

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が表示されたときにウィンドウを開いて終了して表示するだけです。

このコードで何が間違っているかを私に聞かせてください。

答えて

1

filefield,BLOBおよびFileReaderを使用して、FIDDLEを作成しました。私はchromeFire 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); 
     }; 
    } 
}); 
+0

どうもありがとう、私はガイドとしてこれを扱い、結果を返すようにしてみてください。本当にありがとう! – Tad

+0

心のこもった歓迎@お父さん:) –

関連する問題