Blog. Just Blog

Создание и скачивание файлов в браузере на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Сохранять изображения из браузера мы уже научились, теперь разберем более общий пример, когда надо создать виртуальный файл и отправить его на скачивание. Современными средствами JavaScript можно "на лету" создавать ZIP-архивы, PDF-файлы и даже некоторые форматы офисных документов. Подобное управление файлами посредством JavaScript на стороне клиента значительно повышает удобство работы, так как все манипуляции выполняются без необходимости поддерживать связь с сервером.
  1. function virtual_download (datafile_namemime_type) {
  2.     // Создать элемент Blob
  3.     var blob=new Blob([data], { typemime_type });
  4.     var url=window.URL.createObjectURL(blob);
  5.  
  6.     // Создать элемент ссылки
  7.     var link=document.createElement('a');
  8.     link.href=url;
  9.     link.download=file_name;
  10.     // Добавить элемент в DOM
  11.     document.body.appendChild(link);
  12.     // Эмуляция клика на ссылке
  13.     link.click();
  14.     // Убрать элемент из DOM
  15.     document.body.removeChild(link);
  16.     // Очистить объект Blob
  17.     setTimeout(function() {
  18.         window.URL.revokeObjectURL(url)
  19.     }, 1000);
  20. }
Параметры вызова: data - содержимое виртуального файла, file_name - имя файла, который будет передан на скачивание, и mime_type - MIME-тип файла. Скрипт автоматически создает элемент ссылки, добавляет его в DOM, настраивает у него атрибуты href с содержимым скачиваемого файла и download с указанным имени файла. После этого эмулируется клик на ссылке, что непосредственно запускает загрузку.

Функция вызывается, как показано в следующем фрагменте кода. Это может быть нажатие пользователем на кнопку или ссылку, а также автоматический запуск загрузки после получения определенных данных.
  1. virtual_download('Hello, world!''hello_world.txt''text/plain');
Рабочий пример скрипта со скачиванием виртуального файла вы можете посмотреть на демонстрационной странице.

Кстати, можно реализовать нечто подобное вообще без скриптов. К примеру, у вас на сервере есть некий документ в виде HTML-страницы или PDF-файла, который пользователю надо скачать по ссылке. Если просто кликнуть на ссылку, то документ откроется в браузере, вместо того, чтобы отправиться на загрузку. Можно, конечно, оборачивать это в правила .htaccess, обрабатывать скриптами с отправкой заголовков или как-то еще. Но есть способ гораздо проще:
  1. <a href="/generate_blank.php?id=123" download="empty_blank.html">Скачать бланк</a>
В приведенном примере при клике на ссылку отработает скрипт на сервере, а его выхлоп будет отправлен для скачивания в браузер в виде файла под именем "empty_blank.html".

Поделиться ссылкой ВКонтакте
Просмотров: 559 | Комментариев: 3

Метки: JavaScript

Комментарии

Отзывы посетителей сайта о статье
ManHunter (29.10.2024 в 13:26):
Дополнил статью примером на чистом html.
ManHunter (25.10.2024 в 11:44):
Примерно для этого оно и реализовано. С морды берутся заполненные данные, подставляются в шаблонку, которая хранится на странице в виде строки, а потом отправляются на скачивание. Количество запросов на сервер - ноль.
DiPrm (25.10.2024 в 11:14):
Интересная фича. Можно, в принципе, реализовать «выдать пустой бланк» не нагружая бэкенд.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0075 сек.) / Память: 4.5 Mb
Наверх