Гайд по Base64

Base64 -> файл в JavaScript

Как восстановить Blob/File из Base64 и скачать файл в браузере без серверной обработки.

Обновлено:

Во фронтенде часто нужно собрать файл из Base64-строки.

Это можно сделать прямо в браузере через Blob и Object URL.

Преобразование в Blob

Сначала декодируйте строку, затем сформируйте Uint8Array и Blob с нужным MIME.

  • atob для декодирования Base64.
  • Uint8Array для байтового массива.
  • Корректный MIME для правильного открытия файла.

Запуск скачивания

Создайте временный URL и кликните по скрытой ссылке.

function downloadBase64File(base64: string, mime: string, filename: string) {
  const binary = atob(base64);
  const bytes = Uint8Array.from(binary, (ch) => ch.charCodeAt(0));
  const blob = new Blob([bytes], { type: mime });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

Проверки перед decode

Большинство ошибок связаны с некорректным payload или неверным MIME.

  • Нормализуйте Base64URL-полезную нагрузку.
  • Проверьте длину и допустимые символы.
  • Для неизвестного формата используйте .bin.

Надежное восстановление файла

Стабильное декодирование требует корректной работы с MIME и предсказуемого fallback, когда метаданные payload отсутствуют.

  • Храните MIME и имя файла рядом с Base64 строкой.
  • Для неизвестного контента используйте расширение .bin.
  • Проверяйте длину и алфавит строки до atob.

Частые вопросы

Как безопасно декодировать Base64 в файл в браузере?

Сначала нормализуйте строку, затем проверьте формат и длину, после этого создавайте Blob с ожидаемым MIME.

Почему скачанный файл может быть поврежден?

Частые причины: обрезанный payload, неверный MIME или Base64URL без предварительной нормализации.

Стоит ли рендерить декодированный файл инлайном по умолчанию?

Только для проверенных форматов. Для неизвестных данных безопаснее использовать скачивание.

Целевая страница конвертера по этому интенту

Связанные инструменты

Следующие шаги

Другие гайды по Base64

Редакционные и trust-сигналы

  • Материал проверяется на практическую применимость в браузерных сценариях.
  • Примеры ориентированы на безопасную обработку payload и валидацию.
  • На каждой странице есть дата обновления и ссылки на смежные маршруты.