JSZip Создаем .zip файлы

    Очень хороший и простой способ отдать клиенту несколько файлов в zip архиве. Не нагружая и без того нагруженный сервер.
    var zip = new JSZip();
    zip.add("Hello.txt", "Hello World\n");
    img = zip.folder("images");
    img.add("smile.gif", imgData, {base64: true});
    content = zip.generate();
    location.href="data:application/zip;base64,"+content;
    

    Итак давайте разберем, что тут происходит.
    Создается экземпляр нашего zip архива, класс JSZip,.
    Далее мы можем добавлять в него любые данные, допустим Hello.txt, также можно добавить папку images.
    Далее положить в нее smile.gif, все это завернуть, и отдать вам как zip фаил.

    Поддерживаемые Браузеры


    Opera Firefox Safari Chrome
    7.5+ Имя файла «default.zip» 3.0+ Имя файла набор из символов алфавита с расширением ".part" Имя файла «Unknown» ( у меня Загруженное ) без расширения Имя файла «download.zip»

    Думаю про IE я промолчу :)

    Документация



    new JSZip([compressionMethod])

    Конструктор.

    compressionMethod, строка. Метод компрессии используемый в .zip файле.
    Доступные методы.
    «STORE» без компрессии, по умлочанию.
    «DEFLATE» стандартная zip компрессия, нужен файл jszip-deflate.js
    var zip = new JSZip(); // тоже что и new JSZip("STORE");
    var zip = new JSZip("DEFLATE");
    


    add(name, data [,options])

    Добавить файл в наш zip архив. Поддерживает цепочку (chaining)

    Опции (options)
    base64, булево. Поставьте в true если data кодирована в base64. К примеру картинка из canvas.
    binary, булево. По умолчанию в true если data в base64, иначе false
    date, Дата. Используйте чтобы установить дату последнего изменения файла. Иначе будет использовано текущее время.

    zip.add("Hello.txt", "Hello World\n");
    zip.add("smile.gif", "R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=", {base64: true});
    zip.add("magic.txt", "U2VjcmV0IGNvZGU=", {base64: true, binary: false});
    zip.add("Xmas.txt", "Ho ho ho !", {date : new Date("December 25, 2007 00:00:01")});
    
    zip.add("animals.txt", "dog,platypus\n").add("people.txt", "james,sebastian\n");
    

    Результат: Hello.txt, smile.gif, magic.txt, Xmas.txt, animals.txt, people.txt

    folder(name)

    Добавить директорию в zip архив. Поддерживает цепочку (chaining)
    zip.folder("images");
    zip.folder("css").add("style.css", "body {background: #FF0000}");
    // or specify an absolute path (using forward slashes)
    zip.add("css/font.css", "body {font-family: sans-serif}")
    

    Результат: images/, css/, css/style.css, css/font.css

    find(needle)

    Сравнить строку или регулярное выражение со всеми именами файлов и вернуть объект с информацией по каждому совпадению.
    zip.add("Readme", "Hello World!\n");
    zip.add("Readme.French", "Bonjour tout le monde!\n");
    zip.add("Readme.Pirate", "Ahoy m'hearty!\n");
    
    zip.find("Readme"); // only finds "Readme"
    zip.find(/^Readme/); // Regular expression finds all three
    

    Результат: Массив со всеми совпадениями вида: {name: «Readme», data: «Hello World!», dir: false}

    remove(name)

    Удалить файл или папку
    <source lang=«javascript>
    zip.add(»Hello.txt", «Hello World\n»);
    zip.add(«temp.txt», «nothing»).remove(«temp.txt»);

    Результат: Hello.txt
    zip.add("Hello.txt", "Hello World\n");
    zip.folder("css").add("style.css", "body {background: #FF0000}");
    zip.remove("Hello.txt").remove("css");
    

    Результат: Empty.zip

    generate(asBytes = false)

    Генерирует zip архив. По умолчанию кодированный в base64, передайте true чтобы получить 'голую' byte строку.
    content = zip.generate();
    location.href="data:application/zip;base64,"+content;
    content = zip.generate(true);
    for (var c = 0; c < content.length; c++)
    {
        console.log(content.charCodeAt(c));
        // do other things
    }
    


    Сайт: jszip.stuartk.co.uk
    Github: github.com/Stuk/jszip



    Материал подготовлен в редакторе «Руки&Клавиатура»
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 34

      0
      Прекрасно.

      Теперь ему бы ещё распаковывать уметь.
        +5
        Не понял. Сначала предлагается скачать весь архив не запакованный, потом потратить циклы процессора на упаковку, и скачать то, что уже скачано но упаковано? Кроме как сайты где распространяются бесплатные иконки не вижу смысла…
          –3
          Допустим, вы дизайнер иконок, на странице уже загружены иконки, но выкачивать их по одной, нет ни единого желания, да и пересобирать архив на сервере если добавиться одна или несколько иконок, тоже как то не очень хочется. Вот тут и пригодиться данный инструмент, даже можно сделать опции по выбору\исключению нужных иконок.
            0
            > Кроме как сайты где распространяются бесплатные иконки не вижу смысла…
              +1
              Возможности применения более широки, чем вы думаете. Любой контент, генерируемый на клиенте можно собрать в архив, не отправляя его на сервер. Примеров можно привести массу, первое, что пришло в голову — это упаковка примера с JsFiddle в архив, используя API.
                –2
                Еще один: вы смотрите какие-нибудь картинки по очереди и отмечаете те, которые понравились и которые хотите скачать.
                И еще: сборка расширений для браузеров прямо в браузере.
                И еще один: упаковка песен на сайте, который использует чужое API.
                  0
                  Расширение до хрома VK musicer вроде как раз использует эту штуку для скачки музыки… только немного навороченую…
                0
                +1
                Ну я встречал такое на книжных сайтах — на либрусеке и флибусте.
                Собираем несколько произведений в один архив.
                Удобная штука.
                  +1
                  Так, что бы собрать архив надо, чтобы данные были на клиенте.
                    0
                    Ну одно дело тратить процессорное время сервера на перепаковку архивов (само собой все книги хранятся в архивах) и совсем другое — возложить это на клиентскую машину.
                      0
                      Ну так файлы то уже скачаны. Пусть уж отдельно каждый фаил скачивается.
                      • UFO just landed and posted this here
                          0
                          Тогда качайте файлы, тратьте процессороное время на архивирование, сохраняйте архив и разархивируйте, то что уже было таким пару секунд назад.
                        0
                        По вашему — проще 1000 раз отдать 10 файлов клиенту, где они будут собраны в архив, чем собрать архив на сервере, сохранить и отдать этот архив 100 раз. Сложность работы на порядок меньше.
                          0
                          Нет, по моему — проще 1000 раз отдать 10 файлов клиенту, чем 100 раз распаковывать 10 архивов и упаковывать их в 1.
                          Пользователь сам выбирает набор файлов для архива.
                          Хранить все варианты? Даже для 10 файлов это даст оверхед в сотни тысяч раз (сумма по k от 2 до 10 сочетаний k из 10).
                  +31
                  зашел на сайт, нажал Run, opera (12) выдала

                  Чета я очканул сохранять такой файл )
                    +6
                    Ого! 3 экзабайта! Это помом больше всего содержимого инета)
                      +26
                      Скачать Интернет БЕСПЛАТНО! без регистраций [x]
                        0
                        Может, это просто файл бэкапа… Админа всея интернета.))
                      +18
                      Для продолжения вставьте другую галактику.
                        0
                        Да, тоже удивился:

                        7 149 449 60,0 GB (767 666 271 050 269 039 bytes)
                        –4
                        Заходил с радостным чувством того, что «вот мне и подвернулась альтернатива swf-файлу для игрушек на HTML5». Реальность оказалась не такой радужной(
                          –1
                          Мне понравилось на их сайте пункт зачем:
                          "… вместо траты тактов сервера и пропускной способности канала..."

                          Я почему-то всегда думал, что экономия канала и нагрузка на сервер употребляется с «или».
                            0
                            О Downloadify почему не упомянули?
                              0
                              Можно еще добавить в функцию список удаленных файлов, которые надо скачать с сервера и запаковать, чтобы не писать zip.add(«Hello.txt», «Hello World\n»);
                                +1
                                а можно «скачать зип и ДОБАВИТЬ к нему сгенерированый js контент»?
                                  +2
                                  Chromium 15
                                  Имя загружаемого файла — «загруженное». Да, именно так, на русском и без расширения =)
                                    +1
                                    Подтверждаю.
                                      0
                                      Архив создается с именем папки, в котором временно хранятся файлы, которые будут запакованы. У вас MUI русский, следовательно, имя архива именно такое.
                                      0
                                      Opera 11 build 1150 предложила скачать:
                                      2198785280,0 ГБ (2 360 927 820 210 766 191 байт)
                                      скачалo default.zip на 367 байт с текстом и гифкой в папке

                                      Может это еще соревнование — кому больше даст интернетов скачать?

                                      ЗЫЖ мне кажется или оно целиком GET'ом передается? Гугл подсказывает что формального ограничения на длину URL нет, но здравый смысл еще никто не отнимал.
                                        0
                                        скорее всего переменная размера при получении таким образом base64 mime не инициализированная оставалась, потому у всех такие числа.
                                        если бы прошел реальный GET запрос, то переменная размера была бы инициализирована и показала бы нормальный размер. разработчикам оперы нужно предусмотреть что в случаи получение base64, взять число байт и умножить 3/4.
                                        0
                                        Не умеет работать с кириллицей в названии файлов (архив становится битым). Лечится транслитерацией.
                                          +1
                                          тестировал в хроме отдылся архив без расширения — это огромный минус, обычный юзер даже не поймет что делать, а писать инструкцию типо переименуйте архив в *.zip это извините не круто для сайта, а также для ie писать костыль через сервер, так что я бы отнес этот скрипт к разделу — «прикольно но пока не юзабельно»

                                          Only users with full accounts can post comments. Log in, please.