Распаковка файлов

Я хочу отображать файлы OpenOffice , .odt и .odp на стороне клиента с помощью веб-браузера.

Эти файлы представляют собой заархивированные файлы. Используя Ajax, я могу получить эти файлы с сервера, но это заархивированные файлы. Мне нужно распаковать их с помощью JavaScript , я пробовал использовать inflate.js, http://www.onicos.com/staff/iz/amuse/javascript/expert/inflate.txt , но безуспешно.

Как я могу это сделать?

Я написал распаковщик на Javascript. Оно работает.

Он полагается на программу чтения бинарных файлов Andy GP Na и некоторую логику расширения RFC1951 от notmasteret. . Я добавил класс ZipFile.

рабочий пример:
http://cheeso.members.winisp.net/Unzip-Example.htm (мертвая ссылка)

Источник:
http://cheeso.members.winisp.net/srcview.aspx?dir=js-unzip (мертвая ссылка)

NB : ссылки мертвы; Скоро найду нового хозяина.

В исходный код включена демонстрационная страница ZipFile.htm и 3 отдельных сценария: один для класса zipfile, один для класса inflate и один для класса чтения двоичных файлов. Демонстрация также зависит от jQuery и jQuery UI. Если вы просто загрузите файл js-zip.zip, весь необходимый исходный код будет там.

Вот как выглядит код приложения в Javascript:

// In my demo, this gets attached to a click event.
// it instantiates a ZipFile, and provides a callback that is
// invoked when the zip is read.  This can take a few seconds on a
// large zip file, so it's asynchronous. 
var readFile = function(){
    $("#status").html("<br/>");
    var url= $("#urlToLoad").val();
    var doneReading = function(zip){
        extractEntries(zip);
    };

    var zipFile = new ZipFile(url, doneReading);
};


// this function extracts the entries from an instantiated zip
function extractEntries(zip){
    $('#report').accordion('destroy');

    // clear
    $("#report").html('');

    var extractCb = function(id) {
        // this callback is invoked with the entry name, and entry text
        // in my demo, the text is just injected into an accordion panel.
        return (function(entryName, entryText){
            var content = entryText.replace(new RegExp( "\\n", "g" ), "<br/>");
            $("#"+id).html(content);
            $("#status").append("extract cb, entry(" + entryName + ")  id(" + id + ")<br/>");
            $('#report').accordion('destroy');
            $('#report').accordion({collapsible:true, active:false});
        });
    }

    // for each entry in the zip, extract it. 
    for (var i=0; i<zip.entries.length;  i++) {
        var entry = zip.entries[i];

        var entryInfo = "<h4><a>" + entry.name + "</a></h4>\n<div>";

        // contrive an id for the entry, make it unique
        var randomId = "id-"+ Math.floor((Math.random() * 1000000000));

        entryInfo += "<span class='inputDiv'><h4>Content:</h4><span id='" + randomId +
            "'></span></span></div>\n";

        // insert the info for one entry as the last child within the report div
        $("#report").append(entryInfo);

        // extract asynchronously
        entry.extract(extractCb(randomId));
    }
}

Демонстрация readFileсостоит из нескольких этапов: fn запускается щелчком мыши и создает экземпляр объекта ZipFile, который считывает zip-файл. Существует асинхронный обратный вызов, когда чтение завершается (обычно происходит менее чем за секунду для zip-файлов разумного размера) - в этой демонстрации обратный вызов хранится в локальной переменной doneReading, которая просто вызываетextractEntries , которая просто слепо распаковывает все содержимое предоставленного zip-файл. В реальном приложении вы, вероятно, выберете некоторые записи для извлечения (разрешите пользователю выбрать или выбрать одну или несколько записей программно и т. Д.).

extractEntriesП перебирает все записи и вызовыextract() каждую, передавая обратный вызов. Распаковка записи занимает время, может быть, 1 с или более для каждой записи в zip-файле, что означает, что асинхронность подходит. Обратный вызов extract просто добавляет извлеченный контент в аккордеон jQuery на странице. Если контент является двоичным, он форматируется как таковой (не показан).

Работает, но мне кажется, что полезность несколько ограничена.

Во-первых: это очень медленно. Распаковка 140 КБ файла AppNote.txt из PKWare занимает ~ 4 секунды. То же самое распаковывание может быть выполнено менее чем за 0,5 с в программе .NET. РЕДАКТИРОВАТЬ : Javascript ZipFile распаковывается значительно быстрее, чем сейчас, в IE9 и Chrome. Он по-прежнему медленнее, чем скомпилированная программа, но достаточно быстр для обычного использования браузера.

Для другого: он не выполняет потоковую передачу. По сути, он забирает все содержимое zip-файла в память. В «реальной» среде программирования вы можете читать только метаданные zip-файла (скажем, 64 байта на запись), а затем читать и распаковывать другие данные по желанию. Насколько я знаю, в javascript нет способа сделать такой ввод-вывод в javascript, поэтому единственный вариант - прочитать весь zip-архив в память и выполнить произвольный доступ к нему. Это означает, что для больших zip-файлов он будет предъявлять необоснованные требования к системной памяти. Не такая уж большая проблема для zip-файла меньшего размера.

Также: он не обрабатывает zip-файл «общего случая» - есть множество опций zip, которые я не потрудился реализовать в распаковщике - например, шифрование ZIP, шифрование WinZip, zip64, имена файлов в кодировке UTF-8 и т. Д. на. ( EDIT - теперь он обрабатывает имена файлов в кодировке UTF-8). Однако класс ZipFile обрабатывает основы. Некоторые из этих вещей было бы несложно реализовать. У меня есть класс шифрования AES в Javascript; которые можно интегрировать для поддержки шифрования. Поддержка Zip64, вероятно, бесполезна для большинства пользователей Javascript, поскольку он предназначен для поддержки zip-файлов размером более 4 ГБ - не нужно извлекать их в браузере.

Я также не тестировал случай распаковки двоичного содержимого. Прямо сейчас распаковывает текст. Если у вас есть заархивированный двоичный файл, вам нужно отредактировать класс ZipFile, чтобы он правильно обрабатывался. Я не понял, как это сделать чисто. Теперь он делает и двоичные файлы.

РЕДАКТИРОВАТЬ - Я обновил библиотеку распаковки JS и демонстрацию. Теперь он делает двоичные файлы в дополнение к тексту. Я сделал его более гибким и общим - теперь вы можете указать кодировку, которая будет использоваться при чтении текстовых файлов. Также расширена демонстрация - в ней, помимо прочего, показано распаковывание файла XLSX в браузере.

Так что, хотя я думаю, что это имеет ограниченную полезность и интерес, оно работает. Думаю, это сработает в Node.js.

Я использую zip.js, и он мне кажется весьма полезным. Стоит посмотреть!

Посмотрите , например, демо-версию Unzip .

Я нашел jszip весьма полезным. Пока что я использовал только для чтения, но у них также есть возможности создания / редактирования.

По коду это выглядит примерно так

var new_zip = new JSZip();
new_zip.load(file);
new_zip.files["doc.xml"].asText() // this give you the text in the file

Одна вещь, которую я заметил, это то, что кажется, что файл должен быть в формате двоичного потока (читать с помощью .readAsArrayBuffer из FileReader (), иначе я получал ошибки, говоря, что у меня может быть поврежденный zip-файл

Изменить: Примечание из руководства по обновлению с 2.x до 3.0.0 :

Метод load () и конструктор с данными (new JSZip (data)) заменены на loadAsync ().

Спасибо user2677034

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

он обещан на основе, он использует WebWorkers для потоковой передачи, а API на самом деле представляет собой простой модуль ES

Я написал «Двоичные инструменты для JavaScript», проект с открытым исходным кодом, который включает возможность распаковывать, распаковывать и распаковывать: https://github.com/codedread/bitjs

Используется в моей программе для чтения комиксов: https://github.com/codedread/kthoom (также с открытым исходным кодом).

HTH!

Пример кода приведен на сайте автора . Вы можете использовать рыбу для перевода текстов (с японского на английский).

Насколько я понимаю по-японски, этот zip-код расширения предназначен для декодирования данных (потоков) ZIP, а не архива ZIP.

Для этого я тоже написал класс. http://blog.another-d-mention.ro/programming/read-load-files-from-zip-in-javascript/ Вы можете загружать базовые ресурсы, такие как javascript / css / images, непосредственно из архива с использованием методов класса. Надеюсь, поможет

Если кто-то читает изображения или другие двоичные файлы из zip-файла, размещенного на удаленном сервере, вы можете использовать следующий фрагмент для загрузки и создания zip-объекта с помощью библиотеки jszip .

// this function just get the public url of zip file.
let url = await getStorageUrl(path) 
console.log('public url is', url)
//get the zip file to client
axios.get(url, { responseType: 'arraybuffer' }).then((res) => {
  console.log('zip download status ', res.status)
//load contents into jszip and create an object
  jszip.loadAsync(new Blob([res.data], { type: 'application/zip' })).then((zip) => {
    const zipObj = zip
    $.each(zip.files, function (index, zipEntry) {
    console.log('filename', zipEntry.name)
    })
  })

Теперь, используя zipObj, вы можете получить доступ к файлам и создать для них URL-адрес src.

var fname = 'myImage.jpg'
zipObj.file(fname).async('blob').then((blob) => {
var blobUrl = URL.createObjectURL(blob)