ExtJS 4 - 如何使用Ajax下載文件？

我有一個形式與各種文本框和兩個按鈕 - 導出到Excel和導出到CSV。ExtJS 4 - 如何使用Ajax下載文件？

用戶可以將值提供給表單中的不同字段，然後單擊其中一個按鈕。

預期的行爲是應該觸發一個Ajax請求，將字段的值作爲參數和所選文件（Excel/CSV按照按鈕點擊）應該被下載（我沒有提交表單，因爲需要在提交之前在值處做了一些處理）。

我一直使用的下載Ajax請求的成功函數下面的代碼：在服務器上的物理文件創建時

result = Ext.decode(response.responseText); 

try { 
    Ext.destroy(Ext.get('testIframe')); 
} 

catch(e) {} 

Ext.core.DomHelper.append(document.body, { 
    tag: 'iframe', 
    id:'testIframe', 
    css: 'display:none;visibility:hidden;height:0px;', 
    src: result.filename, 
    frameBorder: 0, 
    width: 0, 
    height: 0 
});

上面的代碼已經在的情況下正常工作。但是在我目前的項目中，文件不是在服務器上創建的，而是內容僅通過適當的頭文件流到瀏覽器。

因此，當文件不存在於物理服務器上時，有沒有辦法使用Ajax下載文件？只是補充一點，我有一長串參數，我需要發送到服務器，因此不能將它們全部添加到iframe的src。

任何人都可以在此指導？

感謝您提前提供任何幫助。

來源

2011-10-12 netemp

http://stackoverflow.com/questions/5753811/get-response-file-use-extjs/5757369#5757369 –

感謝您分享鏈接Amol。我經歷了它，而我沒有使用它的唯一原因是我無法以這種方式將參數傳遞到服務器。正如問題中提到的，我有一長串參數，我不能附加到URL並傳遞給服務器。有什麼可以解決的，你可以建議嗎？再次感謝。 – netemp

關於通過POST下載文件，請參閱http://stackoverflow.com/questions/7563791/is-it-possible-to-download-a-file-with-http-post雖然我不喜歡那裏的最佳答案目前，因爲它似乎忽略了使用JavaScript來啓動下載的要求。 –

你可以使用組件這樣的：

Ext.define('CMS.view.FileDownload', { 
    extend: 'Ext.Component', 
    alias: 'widget.FileDownloader', 
    autoEl: { 
     tag: 'iframe', 
     cls: 'x-hidden', 
     src: Ext.SSL_SECURE_URL 
    }, 
    stateful: false, 
    load: function(config){ 
     var e = this.getEl(); 
     e.dom.src = config.url + 
      (config.params ? '?' + Ext.urlEncode(config.params) : ''); 
     e.dom.onload = function() { 
      if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') { 
       Ext.Msg.show({ 
        title: 'Attachment missing', 
        msg: 'The document you are after can not be found on the server.', 
        buttons: Ext.Msg.OK, 
        icon: Ext.MessageBox.ERROR 
       }) 
      } 
     } 
    } 
});

把它放在某處視，例如：

{ 
    region: 'south', 
    html: 'South', 
    items: [ 
     { 
      xtype: 'FileDownloader', 
      id: 'FileDownloader' 
     } 
    ] 
}

不要忘記，要求它在你的視類：

requires: [ 
    'CMS.view.FileDownload' 
]

動作處理程序可能如下所示：

var downloader = Ext.getCmp('FileDownloader') 
downloader.load({ 
    url: '/attachments/' + record.get('id') + '/' + record.get('file') 
});

在響應中擁有Content-Disposition標頭非常重要，否則不會下載任何內容。

此致敬禮http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4 這件事情適合我。

來源

2011-12-08 00:56:06 Alik

這個工程很好，除了onload永遠不會觸發4.2.2中的dom.onload事件 – boatcoder

ExtJS 4 - 如何使用Ajax下載文件？

回答

相關問題