В современной веб-разработке довольно часто встречаются ситуации, когда вам необходимо сохранить данные в кодировке Base64 в виде файла. Независимо от того, работаете ли вы с изображениями, документами или другими типами файлов, эту задачу можно выполнить различными способами в зависимости от используемого вами технологического стека. В этой статье блога мы рассмотрим несколько методов достижения этой цели в приложении Ionic, уделяя особое внимание решениям на основе JavaScript.

Метод 1. Использование атрибута загрузки HTML5

Один из простых способов — использовать атрибут downloadтега HTML5 a(привязка). Создав временную ссылку с данными Base64 в качестве hrefи указав имя файла в атрибуте download, мы можем инициировать загрузку файла при нажатии на ссылку. Вот пример фрагмента кода:

function saveBase64AsFile(base64Data, fileName) {
  const link = document.createElement('a');
  link.href = base64Data;
  link.download = fileName;
  link.click();
}

Метод 2: создание большого двоичного объекта и использование FileSaver.js

Другой подход предполагает создание объекта Blob из данных Base64 и использование такой библиотеки, как FileSaver.js, для сохранения его в виде файла. FileSaver.js предоставляет простой API для сохранения файлов на стороне клиента. Вот пример того, как вы можете его использовать:

import { saveAs } from 'file-saver';
function saveBase64AsFile(base64Data, fileName) {
  const byteCharacters = atob(base64Data);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], { type: 'application/octet-stream' });
  saveAs(blob, fileName);
}

Метод 3: использование плагина файловой системы Capacitor

Если вы разрабатываете приложение Ionic и имеете доступ к собственной файловой системе устройства, вы можете воспользоваться плагином Capacitor Filesystem. Этот плагин предоставляет набор API для взаимодействия с файловой системой на iOS, Android и в Интернете. Вот пример того, как вы можете использовать плагин для сохранения данных Base64 в виде файла:

import { Filesystem } from '@capacitor/filesystem';
import { FileWriteOptions } from '@capacitor/filesystem/dist/esm/definitions';
async function saveBase64AsFile(base64Data, fileName) {
  const base64Response = await fetch(`data:application/octet-stream;base64,${base64Data}`);
  const arrayBuffer = await base64Response.arrayBuffer();
  const data = new Uint8Array(arrayBuffer);

  const options: FileWriteOptions = {
    path: fileName,
    data: data
  };
  await Filesystem.writeFile(options);
}

В этой статье мы рассмотрели три различных метода сохранения данных Base64 в виде файла в приложении Ionic. Мы рассмотрели использование атрибута HTML5 download, создание Blob и использование FileSaver.js, а также использование плагина Capacitor Filesystem. В зависимости от ваших конкретных требований и настроек проекта вы можете выбрать метод, который лучше всего соответствует вашим потребностям.

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