使用zip.js通过Node.js上的xmlhttp/ajax调用来读取zip文件

Ris*_*tta 8 javascript download node.js arraybuffer zip.js

我在尝试着 :

  1. 通过xmlhttp将zip文件发送到客户端
  2. 然后使用zip.js读取文件并呈现其内容

我成功收到文件的二进制文件,即成功回调被调用,但是当我尝试执行getEntries时,我得到并出错.我认为错误是发送流的方式,请帮忙.

错误消息:

读取zip文件时出错

我的客户端代码(使用角度):

$http.get(window.location.origin + '/book/'+bookName,{responseType:"Blob"}).
success(function (data , error) {
    var a = new Uint8Array(data);
        //var dataView = new DataView(data);
        //var blob = new Blob(dataView.buffer);
    zip.useWebWorkers = true;
    zip.workerScriptsPath = '/js/app/';

    zip.createReader(new zip.BlobReader(data), function(reader) {

      // get all entries from the zip
      reader.getEntries(function(entries) {   //HERE I GET THE ERROR
        if (entries.length) {

          // get first entry content as text
          entries[0].getData(new zip.TextWriter(), function(text) {
            // text contains the entry data as a String
            console.log(text);

            // close the zip reader
            reader.close(function() {
              // onclose callback
              var a = 0;
            });

          }, function(current, total) {
            // onprogress callback
            var a = 0;
          });
        }
      });
    },
     function(error) {
      // onerror callback
        var a = 0;
    });


})
.error( function (data , error) {
    var a = 0;

});
Run Code Online (Sandbox Code Playgroud)

节点上的我的服务器端代码:

router.get('/book/:bookName',function (req , res ) {


console.log('Inside book reading block : ' + req.params.bookName);
req.params.bookName += '.zip';

var filePath = path.join(__dirname,'/../\\public\\books\\' ,req.params.bookName );
var stat = fileSystem.statSync(filePath);

res.writeHead(200, {
    //'Content-Type': 'application/zip',
    'Content-Type': 'blob',
    'Content-Length': stat.size
});

var readStream = fileSystem.createReadStream(filePath);
// replace all the event handlers with a simple call to readStream.pipe()
readStream.pipe(res);   
});
Run Code Online (Sandbox Code Playgroud)

San*_*eep 4

您可能已经找到了解决方案。我今天遇到了同样的问题,这就是我用纯 JavaScript 解决它的方法:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'assets/object/sample.zip', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    // response is unsigned 8 bit integer
    var responseArray = new Uint8Array(this.response);
    var blobData = new Blob([responseArray], {
        type: 'application/zip'
    });
    zip.createReader(new zip.BlobReader(blobData), function(zipReader) {
        zipReader.getEntries(displayEntries);
    }, onerror);
};

xhr.send();
Run Code Online (Sandbox Code Playgroud)

我在代码中看到的问题是,您正在将值更改为 Uint8Array 并将其分配给var a,但仍然使用 blobreader 中的原始数据。此外,blob 读取器需要 blob 而不是数组。所以你应该先转换var a成blob,然后用它来读取。