Создание и скачивание zip-файлов в Chrome на JavaScript

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

Прямо к делу: вот оптимизированный код на JavaScript, позволяющий загрузить файл по data URL:

function downloadFile(dataURL, fileName) {
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = fileName;
  document.body.appendChild(link); // Это необходимо для Firefox, не стоит задаваться вопросом почему 😃
  link.click();
  document.body.removeChild(link); // Давайте поддержим порядок в DOM!
}
// Пример использования функции: downloadFile('data:text/plain;base64,aGVsbG8=', 'hello.txt');

Для загрузки файла вызовите функцию downloadFile(), передав в качестве параметров data URL и требуемое имя файла. Скрипт автоматически создаст элемент <a>, установит для него атрибуты href с вашим data URL и download с указанным именем файла, а затем проинициирует клик по ссылке, чтобы начать загрузку.

Подробное управление загрузками

Преобразование в Blob для работы со сложными типами файлов

При работе с файлами, не являющимися изображениями, особенно в браузере Chrome, уместно использовать преобразование в blob. Это позволяет обойти ограничения безопасности при прямом использовании data URL.

function downloadBlob(data, fileName, mimeType) {
  const blob = new Blob([data], { type: mimeType });
  const url = window.URL.createObjectURL(blob);
  downloadFile(url, fileName); // Воспользуемся заранее созданной функцией загрузки, реиспользование — ключ к эффективности!
  setTimeout(() => window.URL.revokeObjectURL(url), 1000); // Не теряем ничего из виду!
}
// Пример вызова: downloadBlob('Привет, мир!', 'hello.txt', 'text/plain');

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

Обработка ошибок при использовании fetch

Обработка ошибок — критически важный аспект процесса скачивания файлов. Ниже представлен способ включения проверки на возможные ошибки во время загрузки с использованием fetch:

fetch('path/to/file')
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    downloadFile(url, 'downloadedFile.ext'); // Успех!
    URL.revokeObjectURL(url); // Поддерживаем порядок
  })
  .catch(error => console.error('Ошибка при загрузке:', error)); // Всегда будьте начеку!

Реализация кроссбраузерной совместимости

Для поддержки различных браузеров рекомендуется использовать внешние библиотеки, такие как download.js. Они облегчают реализацию загрузок и позволяют обойти ограничения устаревших браузеров.

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

Схематично процесс выглядит так: из мира закодированных данных, представленных в виде запертого сундука с сокровищами (📦), мы стремимся раскрыть этот сундук, чтобы расшифровать данные и подготовить их к загрузке в галерею скачиваемых файлов (🖼️):

📦🔒 -> 🔓 -> 🗂️ URL -> 🖼️🆕

Процесс включает в себя следующие шаги:

1. 🔒 – Данные заперты в сундуке URL 📦.
2. 🔓 – Мы открываем сундук и расшифровываем data URL.
3. 🗂️ URL – Данные становятся доступны.
4. 🖼️🆕 – Мы преобразуем данные в новый файл и публикуем его в галерее загрузок 🖼️.

function downloadDataURL(dataURL, fileName) {
  // 🗂️🔓 -> 🖼️🆕
  const a = document.createElement('a');
  a.href = dataURL;
  a.download = fileName;
  document.body.appendChild(a);
  a.click(); // Немного магии, и файл готов!
  document.body.removeChild(a); // Поддерживаем чистоту 😎
}

Расширенные аспекты и шпаргалки

Библиотеки как поддержка

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

Пользовательский фокус: управление загрузками и архивами

Функционал drag-and-drop в сочетании с управлением архивами на клиентской стороне в JavaScript значительно повышает удобство работы с файлами. Это позволяет манипулировать файлами и архивами без необходимости связи с сервером.

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

1. <a>: Элемент Якорь – HTML: Язык гипертекстовой разметки | MDN – Подробное руководство по работе с элементом <a>, что приближает к пониманию его роли при скачивании файлов.
2. Blob – Веб API | MDN – Детальный обзор объекта Blob, использования которого требуется при работе с бинарными данными.
3. Чтение файлов в JavaScript | Статьи | web.dev – Руководство с практикой по взаимодействию с файлами в JavaScript.
4. Как создать файл и инициировать загрузку с помощью JavaScript в браузере (без сервера) | Our Code World – Пошаговое руководство по созданию и инициации загрузки файлов используя JavaScript.
5. File and FileReader – Информативная статья об интерфейсах File и FileReader.
6. Использование файлов в веб-приложениях – Веб API | MDN – Обширное руководство по работе с файлами в веб-приложениях.