Как скачать большие файлы base64 на стороне клиента.

Проблема

Я хочу загрузить большое изображение на стороне клиента, представленное в виде строки base64. Существующие решения, которые я нашел, состояли примерно из следующего:

const downloadFile = (base64, filename) => {
  const a = document.createElement("a");
  a.href = `data:image/png;base64,${base64}`;
  a.download = `${filename}.png`;
  a.click();
}

Теперь, хотя это работает для небольших изображений, у меня был вариант использования, когда мне нужно было загрузить файлы изображений размером более 50 МБ с клиента. К сожалению, этот метод ограничен файлами размером менее 2 МБ, иначе вы получите сетевую ошибку.

Решение — загрузчик больших файлов

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

Шаги

Установите пакет.

npm install large-file-downloader

Импорт и использование. Полные инструкции по интеграции можно найти в проектах README.md. С источником можно ознакомиться здесь.

import downloadFile from 'large-file-downloader';

downloadFile(base64String, fileName);

Пример html2canvas

Мой вариант использования генерировал большие изображения с помощью html2canvas. Вот полная асинхронная реализация создания холста и загрузки результата.

const canvas = await html2canvas(document.getElementById('my-element'));
await downloadFile(canvas.toDataURL('image/png'), 'test.png');