使用jszip搭配FileReader解压并读取zip压缩包中的文件内容&&使用jszip实现在线压缩功能

头像
水冗水孚
     上海
    阅读 6 分钟
    头图

    问题描述

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

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

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

    // 返回一个zip压缩包
route.get('/getZip', (req, res) => {
  // 提前存储一份zip文件的路径
  let zipUrl = './public/zip.zip'
  // 此接口允许跨域
  res.header('Access-Control-Allow-Origin', '*');
  // 设置请求头（指定类型为zip）
  res.setHeader('Content-Type', 'application/zip');
  res.setHeader('Content-Disposition', 'attachment; filename=zip.zip');

  //创建可读流 引入文件模块 const fs = require("fs")
  let readStream = fs.createReadStream(zipUrl)

  // 将读取的结果以管道pipe流的方式返回给前端
  readStream.pipe(res);
})
    • 这样的话，我们就可以给这个接口发送请求，获取对应的压缩包文件了
    • 接口地址：http://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 = () => {
  // 发请求，获取zip压缩包
  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 = () => {
  // 发请求，获取zip压缩包
  axios.get(URL, { responseType: 'blob' })
    .then(async response => {
      const blob = response.data;
      
      // 实例化zip压缩包
      const zip = new JSZip();
      // 加载zip压缩包的内容
      await zip.loadAsync(blob);
      console.log('zip', zip)
    })
    .catch(error => {
      console.error('下载失败', error);
    });
};

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

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

    // 接口返回的blob数据
const blob = response.data;

// 实例化zip压缩包
const zip = new JSZip();
// 加载zip压缩包的内容
await zip.loadAsync(blob);

// 遍历zip压缩包中的内容
zip.forEach((relativePath, file) => {
    // 不读文件夹，读取文件
    if (!file.dir) {
      // 读取文件
      file.async('blob').then(content => {
        // 使用FileReader 读取文件内容
        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 = () => {
  // 发请求，获取zip压缩包
  axios.get(URL, { responseType: 'blob' })
    .then(async response => {
      const blob = response.data;

      // 实例化zip压缩包
      const zip = new JSZip();
      // 加载zip压缩包的内容
      await zip.loadAsync(blob);

      // 遍历zip压缩包中的内容
      zip.forEach((relativePath, file) => {
        // 不读文件夹，读取文件
        if (!file.dir) {
          // 读取文件
          file.async('blob').then(content => {
            // 使用FileReader 读取文件内容
            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在线压缩

    • 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://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/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装填文件
                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>
    javascriptfilereaderzip
    水冗水孚
    1.1k 声望594 粉丝

    每一个不曾起舞的日子，都是对生命的辜负

    « 上一篇
    Refused to execute inline script because it violates the follow.

    引用和评论

    推荐阅读
    头像
    浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

    chokcoco赞 14阅读 4.7k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 4.7k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 7阅读 2.8k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 4阅读 1.6k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 2阅读 1.6k评论 1

    头像
    巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

    chokcoco赞 3阅读 1.5k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 5阅读 2.3k评论 1

    0 条评论
    得票最新