Не получается запаковать PNG в ZIP, с помощью JSZIP

Рейтинг: 0Ответов: 1Опубликовано: 31.07.2023

Есть необходимость на стороне клиента формировать архив с HTML файлом и папкой с изображениями. Накопал в интернете библиотеку JSZIP, которая представляет такой функционал. Импортировать в App.js переменную с JSX разметкой, изменить в ней некоторые значения и сохранить в архиве - получилось. Папку тоже создал, и даже файл закидывается PNG, но он битый (не открывается).

let img = zip.folder('multispace.files');
      img.file('multispacelogo.png', multispacelogo);
      zip.file('multispace.htm', signature.innerHTML);
      zip.generateAsync({ type: "blob" })
        .then(function (content) {

          FileSaver.saveAs(content, "signature.zip");
        });

переменная multispacelogo - это импортированная в JS картинка\

Всем заранее спасибо за ответ!

javascript html reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

В JSZIP изображение передается не в виде бинарных данных, а как base64 строка. Т.е. нужно передавать изображение как Blob объект, например:

// Загружаем картинку как Blob
const imageBlob = await fetch('/logo.png').then(res => res.blob());

// Создаем ZIP архив 
const zip = new JSZip();

// Добавляем папку
const img = zip.folder('images');

// Помещаем Blob в файл
img.file('logo.png', imageBlob);

// Генерируем и сохраняем ZIP  
zip.generateAsync({type:"blob"})
  .then(content => {
    saveAs(content, 'archive.zip') 
  });