ExtJS 4 - Как скачать файл с помощью Ajax? - PullRequest
Новая
       4

ExtJS 4 - Как скачать файл с помощью Ajax?

2 голосов
/ 12 октября 2011

У меня есть форма с различными текстовыми полями и двумя кнопками - Экспорт в Excel и Экспорт в CSV.

Пользователь может ввести значения в различные поля формы и щелкнуть одну из кнопок.

Ожидаемое поведение: запрос 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, когда файл физически отсутствует на сервере? Просто добавлю, что у меня есть длинный список параметров, которые мне нужно отправить на сервер, и, следовательно, я не могу добавить их все в src iframe.

Может ли кто-нибудь руководить этим?

Спасибо за любую помощь заранее.

1 Ответ

13 голосов
/ 08 декабря 2011

Вы можете использовать компонент следующим образом: 

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, в противном случае ничего не загружается.

С уважением перейдите к1015 *http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4 Эта вещь работает для меня.

...