Создание и сохранение файла в 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.