Запуск скачивания файла по клику на кнопку в HTML и JS

Быстрый ответ

Для инициализации загрузки файла по клику на кнопку нам потребуется скрытый элемент <a> и JavaScript. Атрибут href должен содержать ссылку на файл, а метод click() программно инициирует скачивание. Вот так это выглядит:

<button onclick="triggerDownload('file.zip')">Скачать файл</button>

<script>
function triggerDownload(fileName) {
  var element = document.createElement('a');
  element.setAttribute('href', fileName);
  element.setAttribute('download', fileName);
  element.style.display = 'none';
  document.body.appendChild(element);
  // Происходит клик, словно совершил его сам программирующий ниндзя
  element.click();
  document.body.removeChild(element);
}
</script>

Замените 'file.zip' на URL файла и желаемое имя файла при сохранении. В результате у нас получается изящный метод начала загрузки файла при помощи кнопки в HTML.

Разные методы, активирующие загрузку в JavaScript

В JavaScript существует множество подходов к инициации загрузки. Давайте разберёмся в продвинутых клиентских методах, позволяющих начать загрузку файлов без использования серверных технологий.

Создание "Blob" и URL "data" на лету

Для работы с необычными источниками файлов предусмотрены интерфейс Blob и URL data. Блобы упаковывают данные, а URL data позволяют инкапсулировать их непосредственно в строку.

const data = new Blob([content], {type: 'text/plain'});
const url = URL.createObjectURL(data); // Наш собственный Blob!
downloadFile('dynamic.txt', url); // Пришло время скачивать динамический файл!

Не забывайте освобождать URL блобов с помощью URL.revokeObjectURL(), чтобы предотвратить утечки памяти — мы же не хотим иметь дело с утечками!

Подробнее об этом расскажет наш спикер на видео

Быстрое решение через "window.open"

Если у вас есть файл, доступный по URL, просто выполните:

window.open('path/to/file.zip');

Это самый простой и беззаботный способ, но будьте осторожны с блокировщиками всплывающих окон, которые могут помешать процессу загрузки.

Безотлагательная загрузка через window.location

Хотите достичь максимальной скорости загрузки? Установите window.location на URL файла:

function directDownload(url) {
  window.location = url; // И загрузка начинается!
}

Это чем-то напоминает автоматический клик ниндзя-робота по ссылке для скачивания, только быстрее.

Соблюдение политики одного источника

Боритесь с ограничениями политики одного источника при загрузке ресурсов с разных доменов. Используйте сервер для проксирования или настройте CORS, если имеете возможность управлять внешним сервером.

Визуализация

Вот так можно представить процедуру загрузки файла:

Клик по кнопке: [👆🔘]

Система реагирует на действие:

Операции системы: [🔍📄]->[💾🍬]

• [🔍📄] Поиск файла
• [💾🍬] Загрузка файла по частям

При нажатии кнопки:

<button onclick="document.getElementById('downloadLink').click()">Скачать файл</button>
<a href="file.zip" download="filename" id="downloadLink" style="display: none;"></a>

Скрытая ссылка активируется и файл направляется в директорию загрузок.

Использование элементов пользовательского интерфейса для лучшего взаимодействия

Если вы хотите усовершенствовать UI, используйте элементы <button> или <input type="button">, чтобы скрыть реальные функции. JavaScript обеспечивает бесшумное начало загрузки, сочетая в себе эстетику и практичность:

<button onclick="downloadFile('report.pdf', '/documents/report.pdf')">Скачать отчет</button>

Взаимодействие с заголовками сервера для управления загрузкой

Иногда требуется поддержка на уровне сервера. Если у вас есть доступ к настройкам сервера, задайте заголовок Content-Disposition: attachment, чтобы инициировать загрузку во время навигации.

Извлечение имён файлов из URL для оптимизации

Чтобы избежать повторения, извлеките имя файла из URL для атрибута download:

function downloadFileFromURL(url) {
  const fileName = url.split('/').pop(); // Как плод, выпадающий с дерева!
  downloadFile(fileName, url);
}

Полезные материалы

1. HTML a download Attribute — Подробное руководство W3Schools о атрибуте download в HTML.
2. Blob – Web APIs | MDN — Документация MDN по созданию и загрузке блобов в JavaScript.
3. Using files from web applications – Web APIs | MDN — Обширное руководство по работе с файлами в веб-приложениях.
4. Blob — Руководство JavaScript.info о возможностях сохранения файлов.
5. GitHub – eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation — Инструмент для сохранения файлов на клиентской стороне с использованием FileSaver.js.
6. Download File Using JavaScript/jQuery – Stack Overflow — Пользовательские решения со Stack Overflow для загрузки файлов при помощи JavaScript.