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

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模型数据，这里只列出了核心代码！