已通过Axios获取后端Zip文件，如何在前端展示其内容？

1. 先调整Axios请求配置 #

首先得确保Axios请求时指定响应类型为blob，因为Zip是二进制文件，默认的JSON解析会把文件搞坏。修改你的请求代码：

function handleSubmit(e) {
  e.preventDefault();
  article['file'] = e.target.file.files[0];

  // 给请求加上responseType配置
  TransferService.makeRequest(article, {
    responseType: 'blob'
  })
  .then((res) => {
    // 拿到Blob后交给处理函数
    handleZipFile(res.data);
  })
}

如果你的TransferService.makeRequest是封装过的Axios方法，要保证它能把responseType传递到底层的Axios请求里。

2. 用JSZip解析Zip文件 #

前端没法直接读取Zip内容，得借助JSZip这个库来解析。先把JSZip引入项目：

• npm安装：执行npm install jszip，之后在代码里导入import JSZip from 'jszip';
• 或者下载JSZip的本地脚本，在HTML里用<script>标签引入

然后写解析Zip的函数：

function handleZipFile(zipBlob) {
  const jszip = new JSZip();
  
  jszip.loadAsync(zipBlob)
    .then((zip) => {
      // 遍历Zip里的所有文件
      Object.keys(zip.files).forEach((filename) => {
        const file = zip.files[filename];
        // 跳过文件夹
        if (!file.dir) {
          // 按文件类型分别处理
          if (file.name.match(/\.(txt|json|md)$/)) {
            // 文本类文件，读内容直接展示
            file.async('text').then((content) => {
              const textBlock = document.createElement('div');
              textBlock.innerHTML = `<h3>${filename}</h3><pre>${content}</pre>`;
              document.body.appendChild(textBlock);
            });
          } else if (file.name.match(/\.(png|jpg|jpeg|gif)$/)) {
            // 图片类文件，生成链接展示
            file.async('blob').then((imgBlob) => {
              const imgUrl = URL.createObjectURL(imgBlob);
              const imgBlock = document.createElement('div');
              imgBlock.innerHTML = `<h3>${filename}</h3><img src="${imgUrl}" alt="${filename}" />`;
              document.body.appendChild(imgBlock);
              // 不用的时候记得释放内存
              setTimeout(() => URL.revokeObjectURL(imgUrl), 10000);
            });
          } else {
            // 其他类型文件，提供下载链接
            file.async('blob').then((fileBlob) => {
              const downloadUrl = URL.createObjectURL(fileBlob);
              const linkBlock = document.createElement('div');
              linkBlock.innerHTML = `<h3>${filename}</h3><a href="${downloadUrl}" download="${filename}">点击下载</a>`;
              document.body.appendChild(linkBlock);
            });
          }
        }
      });
    })
    .catch((err) => {
      console.error('解析Zip失败:', err);
    });
}

3. 关键注意点 #

• 一定要加responseType: 'blob'，不然Axios会把二进制数据当成字符串解析，Zip文件直接损坏无法读取。
• 可以根据业务需求扩展文件类型的处理逻辑，比如PDF、Excel等，对应找前端展示方案即可。
• 用URL.createObjectURL生成的链接，记得在不需要的时候调用URL.revokeObjectURL释放内存，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Sumit Kumar