使用jszip搭配FileReader解压并读取zip

发表于 2025-10-9 更新于 2025-10- 9

作者 mdo

28~36 分钟 阅读

问题描述

笔者最近遇到一个需求
就是把后端接口返回的zip压缩包中的文件提取出来
并且解析拿到压缩包中的文件具体内容
（比如，如果是txt文件，要读取其中的txt里面有哪些文字）
下载其中部分文件使用file-saver的saveAs方法

Nodejs的express提供一个接口返回一个zip压缩包

为了方便更好阅读，笔者用express提供了一个接口

route.get('/getZip', (req, res) => {

  let zipUrl = './public/zip.zip'

  res.header('Access-Control-Allow-Origin', '*');

  res.setHeader('Content-Type', 'application/zip');
  res.setHeader('Content-Disposition', 'attachment; filename=zip.zip');


  let readStream = fs.createReadStream(zipUrl)


  readStream.pipe(res);
})

这样的话，我们就可以给这个接口发送请求，获取对应的压缩包文件了
接口地址：ashuai.work/api/getZip
当然，大家也可以复制粘贴到浏览器地址栏中回车直接下载
zip压缩包内容如下：

下载jszip和file-saver

npm i jszip file-saver --save

"jszip": "^3.10.1",
"file-saver": "^2.0.5",

请求压缩包数据、并解压、再读取文件

比如，我是点击按钮请求数据

<template>
  <div>
    <button @click="downloadZipAndExtract">下载并提取压缩文件中的内容文件</button>
  </div>
</template>

<script setup>
import { saveAs } from 'file-saver';
import JSZip from 'jszip';
import axios from 'axios';

const URL = 'http://ashuai.work/api/getZip'

const downloadZipAndExtract = () => {

  axios.get(URL, { responseType: 'blob' })
    .then(async response => {
      const blob = response.data;
      console.log('blob', blob)
    })
    .catch(error => {
      console.error('下载失败', error);
    });
};
</script>

上述打印结果如下图：

size是文件大小，289759字节大小；类型为zip

把接口返回的blob，交给zip去异步加载

const downloadZipAndExtract = () => {

  axios.get(URL, { responseType: 'blob' })
    .then(async response => {
      const blob = response.data;


      const zip = new JSZip();

      await zip.loadAsync(blob);
      console.log('zip', zip)
    })
    .catch(error => {
      console.error('下载失败', error);
    });
};

上述打印结果如下：我们已经可以看到zip压缩包中的文件有哪些了

遍历zip中的files，既可拿到对应文件，再使用FileReader读取内容

const blob = response.data;


const zip = new JSZip();

await zip.loadAsync(blob);


zip.forEach((relativePath, file) => {

    if (!file.dir) {

      file.async('blob').then(content => {

        const reader = new FileReader();
        reader.onload = (e) => {
          console.log('文件内容------>', e.target.result);
        }
        reader.readAsText(content);

        saveAs(content, file.name);
      })
    }
});

上述打印文件内容如下：

完整代码

复制粘贴即用

<template>
  <div>
    <button @click="downloadZipAndExtract">下载并提取压缩文件中的内容文件</button>
  </div>
</template>

<script setup>
import { saveAs } from 'file-saver';
import JSZip from 'jszip';
import axios from 'axios';

const URL = 'http://ashuai.work/api/getZip'

const downloadZipAndExtract = () => {

  axios.get(URL, { responseType: 'blob' })
    .then(async response => {
      const blob = response.data;


      const zip = new JSZip();

      await zip.loadAsync(blob);


      zip.forEach((relativePath, file) => {

        if (!file.dir) {

          file.async('blob').then(content => {

            const reader = new FileReader();
            reader.onload = (e) => {
              console.log('文件内容------>', e.target.result);
            }
            reader.readAsText(content);

            saveAs(content, file.name);
          })
        }
      });
    })
    .catch(error => {
      console.error('下载失败', error);
    });
};
</script>

地址：

jszip：www.npmjs.com/package/jsz…
file-saver：www.npmjs.com/package/fil…

jszip在线压缩

jszip除了能够解压zip压缩包中文件之外
还能够把文件（文件夹）压缩成zip包
如下的html文件
复制粘贴即用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zip压缩文件和文件夹</title>
    <script src="https://www.mdo.ink/upload/jszip.min.js"></script>
</head>

<body>
    <h1>文件和文件夹压缩</h1>
    <button id="compressFiles">压缩文件</button>
    <button id="compressFolder">压缩文件夹</button>

    <input type="file" id="fileInput" multiple style="display: none;">
    <input type="file" id="folderInput" webkitdirectory directory style="display: none;">

    <script>

        const compressFilesButton = document.getElementById('compressFiles');

        const compressFolderButton = document.getElementById('compressFolder');

        const fileInput = document.getElementById('fileInput');

        const folderInput = document.getElementById('folderInput');


        compressFilesButton.addEventListener('click', () => {
            fileInput.click();
        });


        compressFolderButton.addEventListener('click', () => {
            folderInput.click();
        });


        fileInput.addEventListener('change', async () => {
            const files = fileInput.files;
            if (files.length > 0) {
                await compressAndDownload(files, 'compressed_files.zip');
            }
        });


        folderInput.addEventListener('change', async () => {
            const files = folderInput.files;
            if (files.length > 0) {
                await compressAndDownload(files, 'compressed_folder.zip');
            }
        });


        async function compressAndDownload(files, zipFileName) {

            const zip = new JSZip();

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const relativePath = file.webkitRelativePath || file.name;

                zip.file(relativePath, file);
            }


            const content = await zip.generateAsync({ type: 'blob' });

            const link = document.createElement('a');
            link.href = URL.createObjectURL(content);
            link.download = zipFileName;
            link.click();
            URL.revokeObjectURL(link.href);
        }
    </script>
</body>

</html>

知识库

解压

许可协议: CC BY 4.0