Создать архив на странице

#javascript #файлы #google_chrome #архивация

У меня есть набор data-uri и ссылок, по которым я могу послать ajax-запросы, а также
немного дополнительной текстовой информации. При этом скрипт исполняется на странице.
Хотелось бы из всего этого создать единый архив (с кучей файлов) и предоставить пользователю
возможность скачать его через ObjectURL.

Насколько я представляю, самым простым форматом архива является tar. Как реализовать
архивацию в tar на клиенте?



var c1 = "Just some text file"
var b1 = new Blob([c1], {type : 'text/plain'})
var f1 = new File([b1], "file-1.txt")

var c2 = new Uint8Array([0x89,0x50,0x4E,0x47,0x0D,0x0A,0x1A,0x0A,0x00,0x00,0x00,0x0D,0x49,0x48,0x44,0x52,0x00,0x00,0x00,0x08,0x00,0x00,0x00,0x08,0x01,0x03,0x00,0x00,0x00,0xFE,0xC1,0x2C,0xC8,0x00,0x00,0x00,0x06,0x50,0x4C,0x54,0x45,0xFF,0xFF,0xFF,0x00,0x00,0x00,0x55,0xC2,0xD3,0x7E,0x00,0x00,0x00,0x16,0x49,0x44,0x41,0x54,0x78,0x5E,0x63,0xF8,0xCF,0xD0,0xC8,0xB0,0x97,0x61,0x29,0x10,0xEE,0x05,0xB2,0xFE,0x03,0x00,0x2E,0x30,0x05,0xC5,0x31,0x03,0x9F,0xF7,0x00,0x00,0x00,0x00,0x49,0x45,0x4E,0x44,0xAE,0x42,0x60,0x82])
var b2 = new Blob([c2], {type: 'image/png'})
var f2 = new File([b2], "file-1.png")

var a1 = document.getElementById("a1")
a1.href = URL.createObjectURL(f1)
a1.download = f1.name

var a2 = document.getElementById("a2")
a2.href = URL.createObjectURL(f2)
a2.download = f2.name

var aa = document.getElementById("aa")
aa.href = "data:text/plain,???"; // Архив из двух файлов
aa.download = "all-files.tar"
Download text

Download image

Download both




    

Ответы

Ответ 1

Есть jszip, он умеет как распаковывать так и упаковывать zip как в браузере так и
на node.js.

Вот пример работы с этой библиотекой, используя Ваши наработки:

// создаем новый архив
var zip = new JSZip();  

// добавим туда текстовый файл                   
zip.file("file-1.txt", c1);  

// создаем директорию images               
var img = zip.folder("images"); 

// добавим туда картинку            
img.file("file-1.png", c2, {base64: true});

// асинхронно получаем готовый архив
zip.generateAsync({type:"blob"}).then(function(content) {

   // создаем  ссылку для скачивания
   var aa = document.getElementById("aa")
   aa.href =  URL.createObjectURL(content)
   aa.download = "all-files.zip"
});




var c1 = "Just some text file"
var b1 = new Blob([c1], {type : 'text/plain'})
var f1 = new File([b1], "file-1.txt")

var c2 = new Uint8Array([0x89,0x50,0x4E,0x47,0x0D,0x0A,0x1A,0x0A,0x00,0x00,0x00,0x0D,0x49,0x48,0x44,0x52,0x00,0x00,0x00,0x08,0x00,0x00,0x00,0x08,0x01,0x03,0x00,0x00,0x00,0xFE,0xC1,0x2C,0xC8,0x00,0x00,0x00,0x06,0x50,0x4C,0x54,0x45,0xFF,0xFF,0xFF,0x00,0x00,0x00,0x55,0xC2,0xD3,0x7E,0x00,0x00,0x00,0x16,0x49,0x44,0x41,0x54,0x78,0x5E,0x63,0xF8,0xCF,0xD0,0xC8,0xB0,0x97,0x61,0x29,0x10,0xEE,0x05,0xB2,0xFE,0x03,0x00,0x2E,0x30,0x05,0xC5,0x31,0x03,0x9F,0xF7,0x00,0x00,0x00,0x00,0x49,0x45,0x4E,0x44,0xAE,0x42,0x60,0x82])
var b2 = new Blob([c2], {type: 'image/png'})
var f2 = new File([b2], "file-1.png")

var a1 = document.getElementById("a1")
a1.href = URL.createObjectURL(f1)
a1.download = f1.name

var a2 = document.getElementById("a2")
a2.href = URL.createObjectURL(f2)
a2.download = f2.name

// создаем новый архив
var zip = new JSZip();  
 
// добавим туда текстовый файл                   
zip.file("file-1.txt", c1);  

// создаем директорию images               
var img = zip.folder("images"); 

// добавим туда картинку            
img.file("file-1.png", c2, {base64: true});

// асинхронно получаем готовый архив
zip.generateAsync({type:"blob"}).then(function(content) {

   // создаем  ссылку для скачивания
   var aa = document.getElementById("aa")
   aa.href =  URL.createObjectURL(content)
   aa.download = "all-files.zip"
});

Download text

Download image

Download both