JavaScript 如何在线解压 ZIP 文件

若要在JavaScript中在线解压一个ZIP文件，可以使用一个名为jszip的JavaScript库。jszip可以通过NPM或通过CDN链接进行安装。

步骤 1：引入jszip库

安装jszip后，需要将其引入到你的项目中，可以通过如下方式：

<script src="https://cdn.jsdelivr.net/npm/jszip/dist/jszip.min.js"></script>

或者

import JSZip from 'jszip';

步骤 2：获取ZIP文件内容

在首次加载ZIP文件时，需要使用XMLHttpRequest 获取ZIP文件的内容，可以使用fetchAPI。

async function getZipContent(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const content = new Uint8Array(buffer);
  return content;
}

步骤 3：解压缩ZIP文件

一旦ZIP文件内容已被获取，可以使用jszip解压缩它：

const unzip = async (url) => {
  const content = await getZipContent(url);
  const zip = new JSZip();
  const results = await zip.loadAsync(content);
  return results;
}

示例 1：使用jszip解压一个包含文件的ZIP文件

const unzipWithFiles = async (url) => {
  const zipped = await unzip(url);
  const files = Object.keys(zipped.files);
  const unzipped = {};
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const content = await zipped.file(file).async('string');
    unzipped[file] = content;
  }
  return unzipped;
};

这个函数将返回一个包含所有文件名和文件内容映射的对象：

console.log(await unzipWithFiles('example.zip'));
/*
{ 
  'file1.txt': 'This is file 1.', 
  'file2.txt': 'This is file 2.'
}
*/

示例 2：jszip解压包含文件夹的ZIP文件

const unzipWithFolders = async (url) => {
  const zipped = await unzip(url);
  const filePaths = Object.keys(zipped.files);
  const rootFolders = filePaths.filter(path => zipped.file(path).dir);
  const unzipped = {};
  for (let i = 0; i < rootFolders.length; i++) {
    const folder = rootFolders[i];
    const folderPath = folder.slice(0, -1);
    const folderContent = {}
    for (let j = 0; j < filePaths.length; j++) {
      const filePath = filePaths[j];
      if (filePath.indexOf(folderPath) === 0) {
        const content = await zipped.file(filePath).async('string');
        folderContent[filePath.slice(folderPath.length)] = content;
      }
    }
    unzipped[folderPath] = folderContent;
  }
  return unzipped;
};

这个函数将返回一个根目录的文件夹中的所有内容：

console.log(await unzipWithFolders('example-with-folders.zip'));
/*
{
  'folder1': {
    'subfolder1/file1.txt': 'This is file 1 in subfolder1 of folder1.',
    'subfolder1/file2.txt': 'This is file 2 in subfolder1 of folder1.'
  },
  'folder2': {
    'subfolder2/file3.txt': 'This is file 3 in subfolder2 of folder2.',
    'subfolder2/file4.txt': 'This is file 4 in subfolder2 of folder2.'
  }
}
*/

这样就可以从JavaScript中在线解压缩ZIP文件了。