Question

我正在尝试使用JSZip和JSZipUtils将多个图像文件与AngularJS压缩在一起。我仍然是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"});
        }

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

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

我的假设是图像文件格式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;
    }

使用JSZip和JSZipUtils与AngularJS压缩多个图像文件时的空zip文件

0 个答案: