Question:
I have a set of data-uris and links that I can send ajax requests to, as well as some additional textual information. In this case, the script is executed on the page. I would like to create a single archive from all this (with a bunch of files) and provide the user with the opportunity to download it via ObjectURL.
As far as I know, the simplest archive format is tar. How to implement archiving to tar on the client?
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"
<a id="a1" download>Download text</a><br>
<a id="a2" download>Download image</a><br>
<a id="aa" download>Download both</a><br>
Answer:
There is jszip , it can both unpack and pack zip
both in the browser and on node.js
.
Here is an example of working with this library using your work:
// создаем новый архив
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"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.js"></script>
<a id="a1" download>Download text</a><br>
<a id="a2" download>Download image</a><br>
<a id="aa" download>Download both</a><br>