昨天做项目有个需求，后端返回的数据有个字段是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);
});

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);
});

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

<script src="jszip.js"></script>
<script src="jszip-utils.js"></script>

<script> let templatedownload = () => {  var url = 'http://localhost:8008/file/static/threeDModel/vacuumFlask/vacuumFlask.zip'; return $http({  method: "GET", url: url, responseType: "blob", }) }; templatedownload().then(function (response) {  JSZip.loadAsync(response.data)//blob对象 .then((zip) => {  return zip.file("vacuumFlask.json").async("string");//找到需要解压的文件的名称 }) .then((response) => {  console.log(response);//返回解压成功的json文件 }, (error) => {  console.log(error); }); }) </script>

三.项目代码

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


threeDModelDownload(fileLocation: string): Promise<any> { 
    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<any> { 
    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<any>;
};

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