前端js下载zip文件并解压


昨天做项目有个需求，后端返回的数据有个字段是url,前端要通过这个url下载一个3D模型文件，这个模型文件是zip文件（里面有个json文件），拿到这个zip文件还需要解压那到json文件！看下面怎么实现的！


一.  后端返回文件流，前端必须进行转换下载，请求的方式很多，我下面随便写几种！

1.原生js的

function  getBlob()  {
          let  file_url  =  "http://192.168.26.70/file/file/static/threeDModel/vacuumFlask/vacuumFlask.zip"
          let  xhr  =  new  XMLHttpRequest();
          xhr.open("get",  file_url,  true);
          xhr.responseType  =  "blob";
          xhr.onload  =  ()  =>  {
                  if  (this.readyState  ==  4  &&  this.status  ==  200)  {
                          console.log(this.response)
                  }
          };
          xhr.send();
  };
  getBlob();

2.使用angularJS的$http

let  templatedownload  =  ()  =>  {
var  url  =  'http://192.168.26.70/file/file/static/threeDModel/vacuumFlask/vacuumFlask.zip';
return  $http({
        method:  "GET",
        url:  url,
        responseType:  "blob",
})
};
templatedownload().then((response)  =>  {
console.log(response.data);
});
1
2
3
4
5
6
7
8
9
10
11
3.使用fetch

fetch('http://192.168.26.70/file/static/threeDModel/vacuumFlask/vacuumFlask.zip').then((
        response)  =>  {
        console.log(response);
        return  response.blob();//解析成blob对象
}).then((data)  =>  {
        console.log(data);
});
1
2
3
4
5
6
7

二.利用jszip插件解压zip文件






三.项目代码

//3D模型下载接口处理
class  ThreeDPreviewBoardRestService  {
        constructor(
                private  restService:  services.common.RestService,
                private  $http:  angular.IHttpService,
                private  $cacheFactory:  angular.ICacheFactoryService)  {
        }


threeDModelDownload(fileLocation:  string):  Promise  {
        let  that  =  this;
        return  new  Promise(function  (resolve,  reject)  {
                if  (that.$cacheFactory.get('threeDModelObj'))  {
                        //  缓存不为空,则将缓存值返回
                        resolve(that.$cacheFactory.get('threeDModelObj').get('threeDModel'));
                }  else  {
                        that.$http({
                                method:  "GET",
                                url:  that.restService.getConfigUrl('FILE_SERVICE.FILE_STATIC',  fileLocation),
                                responseType:  "blob",
                        }).then(function  (response)  {
                                let  cache  =  that.$cacheFactory('threeDModelObj');
                                cache.put("threeDModel",  response.data);
                                resolve(response.data);
                        },  function  (error)  {
                                reject(error);
                        })
                };
        })
  }
}

let  injectors  =  ["restService",  "$http",  "$cacheFactory",  ThreeDPreviewBoardRestService];

export  {  ThreeDPreviewBoardRestService,  injectors  }

这个文件请求blob数据并对此数据进行缓存

private  getZipThreeDModelObject(threeDModel,  threeDModelName:  string):  angular.IPromise  {
        let  deferred  =  this.$q.defer();
        try  {
                JSZip.loadAsync(threeDModel)
                        .then(function  (zip)  {
                                return  zip.file(threeDModelName)?.async("string");
                        })
                        .then(function  success(threeDModelObject)  {
                                threeDModelObject  &&  deferred.resolve(JSON.parse(threeDModelObject));
                        },  function  error(error)  {
                                deferred.reject(error);
                        });
        }  catch  (error)  {
                deferred.reject(error);
        }
        return  deferred.promise  as  angular.IPromise;
};

这个文件对文件进行解压获取3d模型数据，这里只列出了核心代码！

原文链接：https://blog.csdn.net/ws9029/article/details/114985977