Создание и скачивание файлов в браузере на JavaScript
Сохранять изображения из браузера мы уже научились, теперь разберем более общий пример, когда надо создать виртуальный файл и отправить его на скачивание. Современными средствами JavaScript можно "на лету" создавать ZIP-архивы, PDF-файлы и даже некоторые форматы офисных документов. Подобное управление файлами посредством JavaScript на стороне клиента значительно повышает удобство работы, так как все манипуляции выполняются без необходимости поддерживать связь с сервером.Code (JavaScript) : Убрать нумерацию
- function virtual_download (data, file_name, mime_type) {
- // Создать элемент Blob
- var blob=new Blob([data], { type: mime_type });
- var url=window.URL.createObjectURL(blob);
- // Создать элемент ссылки
- var link=document.createElement('a');
- link.href=url;
- link.download=file_name;
- // Добавить элемент в DOM
- document.body.appendChild(link);
- // Эмуляция клика на ссылке
- link.click();
- // Убрать элемент из DOM
- document.body.removeChild(link);
- // Очистить объект Blob
- setTimeout(function() {
- window.URL.revokeObjectURL(url)
- }, 1000);
- }
Функция вызывается, как показано в следующем фрагменте кода. Это может быть нажатие пользователем на кнопку или ссылку, а также автоматический запуск загрузки после получения определенных данных.
Code (JavaScript) : Убрать нумерацию
- virtual_download('Hello, world!', 'hello_world.txt', 'text/plain');
Кстати, можно реализовать нечто подобное вообще без скриптов. К примеру, у вас на сервере есть некий документ в виде HTML-страницы или PDF-файла, который пользователю надо скачать по ссылке. Если просто кликнуть на ссылку, то документ откроется в браузере, вместо того, чтобы отправиться на загрузку. Можно, конечно, оборачивать это в правила .htaccess, обрабатывать скриптами с отправкой заголовков или как-то еще. Но есть способ гораздо проще:
Code (HTML) : Убрать нумерацию
- <a href="/generate_blank.php?id=123" download="empty_blank.html">Скачать бланк</a>
Просмотров: 559 | Комментариев: 3
Метки: JavaScript
Комментарии
Отзывы посетителей сайта о статье
ManHunter
(29.10.2024 в 13:26):
Дополнил статью примером на чистом html.
ManHunter
(25.10.2024 в 11:44):
Примерно для этого оно и реализовано. С морды берутся заполненные данные, подставляются в шаблонку, которая хранится на странице в виде строки, а потом отправляются на скачивание. Количество запросов на сервер - ноль.
DiPrm
(25.10.2024 в 11:14):
Интересная фича. Можно, в принципе, реализовать «выдать пустой бланк» не нагружая бэкенд.
Добавить комментарий
Заполните форму для добавления комментария