При работе с web-формами генерация содержимого страниц без перезагрузки с использованием технологии AJAX удобна и широко используется. Как быть, если требуется сохранить результат динамически сформированной страницы на локальный компьютер. Конечно, можно выделить нужное, “скопипастить” и сохранить, например в Word. Однако, для удобства пользователя можно предусмотреть возможность получения файла с данными с сервера (экспорт в документ Word, например). Задачу формирования документа в нужном формате пока пропустим (для эксперимента можно воспользоваться “болванкой” test.doc, например) и сразу перейдем к сохранению файла. Однако, не будем забывать, что файл должен генерироваться на основе данных формы и передаваться они будут методом POST (у GET-метода имеются существенные ограничения на длину запроса, что для формирования документов может быть критично)
Подводные камни Ajax-сохранения файла.
Особенность скачивания файлов с использованием Ajax-технологии в том, что “по умолчанию” файл, отдаваемый сервером, попадает туда, откуда был сделан запрос - в JavaScript. То есть после отправки запроса на сервер, браузер, получая ответ, не предлагает “стандартно” сохранить или открыть файл, продолжает выполнение заданного скрипта.
Как скачать файл Ajax-ом?
Итак, если сформулировать задачу более точно, то требуется отправить POST-запрос на сервер и сохранить полученный файл без перезагрузки страницы. Причем, учитывая информацию предыдущего параграфа, отправка запроса должна быть из “реальной” формы и производиться стандартными средствами браузера.
Вариант 0: отправляем данные AJAX, методом POST. Однако, обратно получаем не сам файл, а условный “ключ”, к которому привязываем специально созданный на сервере “промежуточный” файл. Теперь переход по ссылке с нужным ключом и позволит сохранить нужный файл.
Вариант 1: динамически создаем нужную форму, размещаем в ней нужные поля и отправляем на сервер. Ответ получаем в виде окошка браузера с предложением открыть/сохранить файл.
Вариант 2 очень похож на предыдущий. С мааленьким изменением - всё действо происходит в отдельном IFRAME-элементе, который также формируется динамически. Делается это на случай, если браузер вместо попытки сохранить файл решит уйти с предыдущей страницы с заполненными данными.. В этом случае переход будет осуществлен во внутреннем документе, основная же страница перезагружена не будет.
Если быть более точным, то отправка и сохранение файла “не совсем AJAX” (
совсем не AJAX). Однако, без перезагрузки страницы.
AJAX скачать файл - подборка ссылок:
http://habrahabr.ru/blogs/personal/66772/ - вариант с сохранением временного файла
http://code.msdn.microsoft.com/AjaxFileDownload
http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/
AJAX-загрузка файлов:
http://habrahabr.ru/blogs/jquery/50223/
http://vremenno.net/html-css/file-uploaders-overview/