JSzip解压压缩包、下载压缩包内文件

废话不多说,直接上代码

1、所需物料准备

1、jszip.min.js               仓库地址:https://github.com/Stuk/jszip
                                      CDN地址:https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js
2、FileSaver.min.js       仓库地址:https://github.com/eligrey/FileSaver.js
                                      CDN地址:https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js

2、准备好所需物料后废话不多说,可以上代码了

<body>
	<input id="uploadFile" type="file"  onchange="changeFile()" />
	<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script>
        function changeFile() {
            const uploadFileEle = document.querySelector("#uploadFile");
            let file = uploadFileEle.files[0];
            JSZip.loadAsync(file).then((res) => {
                console.log(res.files);
                res.forEach((ele, obj) => {
                    if (!obj.dir) {//判断是否为文件
                        /**
                         转换成Base64方式,根据需求引用
                            let binary = '';
                            let bytes = obj._data.compressedContent;
                            for (let index = 0; index < bytes.length; index++) {
                                const element = bytes[index];
                                binary += String.fromCharCode(element);
                            }
                            binary = window.btoa(binary);
                        */
                        // 压缩包内文件名称
                        let fileName = obj.name;
                        //压缩包内文件大小
                        let unsize = obj._data.uncompressedSize / 1024;
                        let fileSize = unsize.toFixed(2) + "KB";
                        //下载操作
                        let base = res.file(obj.name).async('blob');
                        base.then(rr => {
                            saveAs(rr, obj.name);
                        })
                    }
                })
            })
        }
    </script>
</body>

3、温馨提示

1、代码可自行复制测试,下载操作根据实际需求更改即可
2、上述代码文件上传没做类型限制,本人在测试过程中发现:.apk,.zip,.rar可读取包内文件。.7z是不支持的哇
3、如压缩包内文件命名为中文是,解压出来文件名可能显示乱码,下载后重命名即可。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐