Создание и загрузка файла без сервера: решение на клиенте

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

const downloadFile = (filename, content) => {
  const blob = new Blob([content], { type: 'text/plain' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link.href);
};

// Пример использования: downloadFile('Письмо_Дамблдора.txt', 'Дорогой мистер Поттер, мы рады сообщить вам, что вы приняты в Школу Чародейства и Волшебства Хогвартс!');

В этом примере кода ключевые элементы – это объект Blob, метод URL.createObjectURL(), свойство link.download. Самое важное – для создания файла сервер не участвует!

Совместимость с браузерами

Для пользователей Internet Explorer начиная с 10-й версии следует использовать метод window.navigator.msSaveOrOpenBlob. Также можно использовать библиотеку FileSaver.js для поддержки различных типов файлов.

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

Рассмотрим воздушный шарик (🎈), наполненный данными (📄):

1. Воздушный шарик надувают данными.
2. К шарику привязывают нить (🧵) с ярлыком (💾 Сохранить), чтобы пользователь мог воспользоваться.
3. Пользователь тянет за нить, шарик лопается и данные 📄 аккуратно сохраняются на устройстве пользователя.

const dataBalloon = new Blob(["Привет, мир!"], { type: 'text/plain' });
const saveString = URL.createObjectURL(dataBalloon);
<a href="${saveString}" download="hello.txt">Сохранить</a>

Работа с большими данными: методы обработки

Для обработки больших объемов данных применяется подход к созданию файлов по частям с помощью Web Workers, позволяющий сохранять отзывчивость приложения.

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

Вопросы безопасности: безопасное использование Data URI

При использовании Data URI обязательно учитывайте безопасность и ограничения различных типов файлов. Не забывайте осуществлять контроль создания и удаления ссылок в DOM для обеспечения удобства пользователей.

Работа с различными типами файлов

Создание CSV-файлов

downloadFile('data.csv', 'column1,column2\nvalue1,value2');

Работа с изображениями

const canvas = document.querySelector('canvas');
canvas.toBlob(function(blob) {
  const imageUrl = URL.createObjectURL(blob);
});

Экспорт аудио- и видеофайлов

Для экспорта аудио и видео используйте API MediaRecorder, позволяющий преобразовать медиа-потоки в формат Blob для скачивания.

Рекомендации для работы с файлами

Освобождение памяти после скачивания файлов

Не забывайте использовать URL.revokeObjectURL после скачивания файлов для освобождения памяти.

Эффективная работа с большими файлами

Для эффективной работы с крупными файлами используйте потоковые операции, что помогает уменьшить нагрузку на память.

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

1. Использование файлов в веб-приложениях – Веб-API | MDN — подробный обзор работы с файлами в JavaScript.
2. Основы Web Workers | Статьи | web.dev — введение в работу с Web Workers.
3. Как создать ссылку для скачивания – W3Schools — описание процесса создания ссылок для скачивания в HTML.
4. File API – W3C — стандарт File API.
5. Blob: конструктор Blob() – Веб-API | MDN — подробности о конструкторе Blob.
6. Blob – JavaScript.info — дополнительная информация о Blob.
7. Имя файла JavaScript blob без ссылки – Stack Overflow — как задать имя файла без отображения ссылки.
8. JSFiddle − Описание — пример создания файла для скачивания на JSFiddle.