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

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

var blob = new Blob(['Привет, мир!'], { type: 'text/plain' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
document.body.appendChild(a); // Добавляем на страницу нашу свежесозданную ссылку.
a.click(); // Инициируем клик по ссылке, чтобы начать загрузку файла.
document.body.removeChild(a); // После инициирования загрузки убираем ссылку.

Данный код инициирует загрузку файла 'example.txt', содержимое которого — 'Привет, мир!'.

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

Забудьте Flash и серверную поддержку при загрузке файлов. Теперь вполне достаточно использовать data URI и элемент <a> с атрибутом download для прямого скачивания файлов.

Детали реализации Data URI

Обратите внимание, что браузеры устанавливают ограничения на максимальную длину data URI. При работе с большими данными это может привести к ошибкам загрузки файла. В таком случае стоит применять encodeURIComponent и Base64-кодирование, которые особенно полезны при работе с бинарными данными, этим можно минимизировать риск возникновения проблем.

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

Инициация скачивания файла

Для того чтобы предложить пользователю скачивание файла без использования сервера, можно открыть data URI в новом окне браузера. Но надёжнее будет использовать URL.createObjectURL с созданными обJектами Blob или File.

Совместимость

В случаях, когда поддержка a.download недоступна или есть необходимость в поддержке специфических API, например, navigator.msSaveBlob в IE, стоит использовать FileSaver.js для обеспечения кроссбраузерного совместимого решения.

Безопасность важнее других факторов

Не забывайте правила безопасности: всегда очищайте имена файлов от лишних символов и используйте специфические MIME-типы для Blob, чтобы контролировать, как браузер обращается с файлами при их загрузке.

Продвинутые техники

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

Бесшовное скачивание

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

Обработка различных типов файлов

Воспользуйтесь разными MIME-типами для Blob, чтобы явно указать, как браузер должен отреагировать на загружаемый файл, будь то PDF, изображение или текстовый документ.

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

Давайте переведём художественное умение в программирование:

Шаг 1: Запишите ваше сообщение на листе бумаги.
Шаг 2: Украсьте его наклейками и рисунками.
Шаг 3: Положите в конверт.

А теперь перенесём это в мир HTML5/JavaScript:

const message = "Привет, Мир!"; // Создаём содержимое
const blob = new Blob([message], {type: 'text/plain'}); // Преобразуем сообщение в цифровой формат

Кликните, и ваше "письмо" уже в пути:

const url = URL.createObjectURL(blob); // Создаём виртуальный «конверт», содержимое которого скачивается по ссылке

Получили готовую к использованию ссылку на скачивание:

[Нажмите, чтобы сохранить](#) // При клике файл загрузится на ваш компьютер

Продвинутые сценарии

Мы предлагаем уникальные подходы и решения для сложных сценариев, связанных с загрузкой файлов.

Динамическое содержимое

Приложения, позволяющие пользователям создавать контент, могут динамически генерировать Blob.

Экспорт данных пользователя

Для экспорта данных, таких как прогресс или настройки, вначале сериализуйте их (например, в формате JSON), затем преобразуйте в Blob и предложите пользователю загрузить эти данные как файл.

Генерация медиафайлов

На стороне клиента можно создавать медиафайлы: изображения через canvas или звуки через Web Audio API, затем можно упаковывать их для загрузки.

Расширения файлов и типы

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

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

1. Использование файлов в веб-приложениях – Веб API | MDN — подробное руководство по работе с файлами в веб-приложениях с помощью HTML5 и JavaScript.
2. Чтение файлов в JavaScript | Статьи | web.dev — статья, которая подробно разбирает различные аспекты и возможности чтения файлов в JavaScript.
3. HTML Web Storage API — руководство, объясняющее принципы работы и использование HTML5 Web Storage API для локального хранения данных.
4. File API — официальная спецификация W3C по File API, основной стандарт по работе с файлами в Интернете.
5. Как использовать HTML5 File Drag and Drop — SitePoint — учебник по реализации работы с файлами с помощью технологии перетаскивания в HTML5 и JavaScript.
6. GitHub – eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation — GitHub-репозиторий с FileSaver.js, популярной JavaScript-библиотекой для сохранения файлов на стороне клиента.
7. Streams API – Веб API | MDN — документация MDN по API для работы с потоковыми данными в JavaScript.