3

我正在尝试使用带有 AngularJS 的 JSZip 和 JSZipUtils 将多个图像文件压缩在一起。我对 AngularJS 还是很陌生，所以我确信我已经把这个过程复杂化了。请多多包涵。

        vm.downloadDaughterZip = function (){
          var zip = new JSZip();
          vm.getBinaryContents(zip).then(function(result){
            vm.getZipImageFiles(result).then(function(data){
                saveAs(data, "daughters.zip");
            });
          });
        }

        vm.getBinaryContents = function (zip) {
          var deferred = $q.defer();
          deferred.resolve(vm.getBinCont(zip, deferred));
          return deferred.promise;
        }

        vm.getBinCont = function (zip, deferred) {
          angular.forEach(vm.selectedDaughtersList, function (value, key){
            var tempPathArray = value.value.split('/');
            var filename = tempPathArray[tempPathArray.length -1];
            vm.getSingleBinaryContentCall(zip, value, filename, deferred);
          });
          return zip;
        }

        vm.getSingleBinaryContentCall = function (zip, value, filename, deferred) {
          deferred.resolve(vm.getSingleBinCont(zip, value, filename));
          return deferred.promise;
        }

        vm.getSingleBinCont = function (zip, value, filename) {
          JSZipUtils.getBinaryContent(value.value, function (err, data){
            if(err){
                alert("some error");
            }
            else{
                zip.file(filename, data, {binary:true, compression : "DEFLATE"});
            }
          });
          return zip;
        }

        vm.getZipImageFiles = function (zip) {
          var deferred = $q.defer();
          deferred.resolve(vm.getImagesForZip(zip));
          return deferred.promise;
        }

        vm.getImagesForZip = function (zip) {
          console.log(zip);
          return zip.generate({type:"blob"});
        }

我正在尝试使用 Promise 处理所有内容，以确保在尝试运行 zip.generate 之前由 JSZipUtils.getBinaryContent 处理文件，然后在使用 saveAs 之前确保它正在处理 zip.generate。

好消息是，当我在底部生成之前查看 zip 的控制台日志时，它似乎显示了正确的结构，包括图像文件数据（由于某种原因被存储为 Uint8Array 类型）。但是当我运行 generate 并将其传递回流到 saveAs 调用时，它生成的 zip 文件是空的。当我对它执行 console.log 时，底部的 zip.generate 生成的 blob 文件似乎没有数据（只有 22 个字节大）。

我的假设是 JSZipUtils.getBinaryContent 生成的图像文件格式是错误的并且 zip.generate 没有正确处理它，或者我仍然遇到某种时间问题。另一个注意事项是图像与代码存储在同一台服务器上，因此我不必担心跨站点问题。非常感谢任何反馈！

解决了！！！

因此，我查看了 JSZip 页面上的一个示例，并以他们的源代码为例进行了清理。我把事情弄得太复杂了，看起来好像有某种时间问题。这是我现在拥有的工作代码：

    vm.downloadDaughterZip = function (){
        var zip = new JSZip();
        var deferreds = [];

        angular.forEach(vm.selectedDaughtersList, function (value, key){
            var tempPathArray = value.value.split('/');
            var filename = tempPathArray[tempPathArray.length -1];
            deferreds.push(vm.getSingleBinCont(zip, value, filename));
        });
        $.when.apply($, deferreds).done(function () {
            var blob = zip.generate({type:"blob"});
            saveAs(blob, "daughters.zip");
        });
    }

    vm.getSingleBinCont = function (zip, value, filename) {
        var deferred = $.Deferred();
        JSZipUtils.getBinaryContent(value.value, function (err, data){
            if(err){
                deferred.reject(err);
            }
            else{
                zip.file(filename, data, {binary:true});
                deferred.resolve(data);
            }
        });
        return deferred;
    }
4

0 回答 0