JavaScript 如何在线解压 ZIP 文件？

class ExeJSZip { 
  // 用于获取url地址对应的文件内容 
  getBinaryContent(url, progressFn = () => {}) { 
    return new Promise((resolve, reject) => { 
      if (typeof url !== "string" || !/https?:/.test(url)) 
        reject(new Error("url 参数不合法")); 
      JSZipUtils.getBinaryContent(url, { // JSZipUtils来自于jszip-utils这个库 
        progress: progressFn, 
        callback: (err, data) => { 
          if (err) { 
            reject(err); 
          } else { 
            resolve(data); 
          } 
        }, 
      }); 
    }); 
  } 
   
  // 遍历Zip文件 
  async iterateZipFile(data, iterationFn) { 
    if (typeof iterationFn !== "function") { 
      throw new Error("iterationFn 不是函数类型"); 
    } 
    let zip; 
    try { 
      zip = await JSZip.loadAsync(data); // JSZip来自于jszip这个库 
      zip.forEach(iterationFn); 
      return zip; 
    } catch (error) { 
      throw new error(); 
    } 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

<p> 
  <label>请输入ZIP文件的线上地址：</label> 
  <input type="text" id="zipUrl" /> 
</p> 
<button id="unzipBtn" onclick="unzipOnline()">在线解压</button> 
<p id="status"></p> 
<ul id="fileList"></ul> 
1.
2.
3.
4.
5.
6.
7.

const zipUrlEle = document.querySelector("#zipUrl"); 
const statusEle = document.querySelector("#status"); 
const fileList = document.querySelector("#fileList"); 
const exeJSZip = new ExeJSZip(); 
 
// 执行在线解压操作 
async function unzipOnline() { 
  fileList.innerHTML = ""; 
  statusEle.innerText = "开始下载文件..."; 
  const data = await exeJSZip.getBinaryContent( 
    zipUrlEle.value, 
    handleProgress 
  ); 
  let items = ""; 
  await exeJSZip.iterateZipFile(data, (relativePath, zipEntry) => { 
    items += `<li class=${zipEntry.dir ? "caret" : "indent"}> 
      ${zipEntry.name}</li>`; 
  }); 
  statusEle.innerText = "ZIP文件解压成功"; 
  fileList.innerHTML = items; 
} 
 
// 处理下载进度 
function handleProgress(progressData) { 
  const { percent, loaded, total } = progressData; 
  if (loaded === total) { 
    statusEle.innerText = "文件已下载，努力解压中"; 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

const path = require("path"); 
const Koa = require("koa"); 
const cors = require("@koa/cors"); 
const Router = require("@koa/router"); 
const StreamZip = require("node-stream-zip"); 
 
const app = new Koa(); 
const router = new Router(); 
const ZIP_HOME = path.join(__dirname, "zip"); // ZIP文件的根目录 
const UnzipCaches = new Map(); // 保存已解压的文件信息 
 
router.get("/", async (ctx) => { 
  ctx.body = "服务端在线解压ZIP文件示例（阿宝哥）"; 
}); 
 
// 注册中间件 
app.use(cors()); 
app.use(router.routes()).use(router.allowedMethods()); 
 
app.listen(3000, () => { 
  console.log("app starting at port 3000"); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

router.get("/unzip/:name", async (ctx) => { 
  const fileName = ctx.params.name; 
  let filteredEntries; 
  try { 
    if (UnzipCaches.has(fileName)) { // 优先从缓存中获取 
      filteredEntries = UnzipCaches.get(fileName); 
    } else { 
      const zip = new StreamZip.async({ file: path.join(ZIP_HOME, fileName) }); 
      const entries = await zip.entries(); 
      filteredEntries = Object.values(entries).map((entry) => { 
        return { 
          name: entry.name, 
          size: entry.size, 
          dir: entry.isDirectory, 
        }; 
      }); 
      await zip.close(); 
      UnzipCaches.set(fileName, filteredEntries); 
    } 
    ctx.body = { 
      status: "success", 
      entries: filteredEntries, 
    }; 
  } catch (error) { 
    ctx.body = { 
      status: "error", 
      msg: `在线解压${fileName}文件失败`, 
    }; 
  } 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

<p> 
  <label>请输入ZIP文件名：</label> 
  <input type="text" id="fileName" value="kl_161828427993677" /> 
</p> 
<button id="unzipBtn" onclick="unzipOnline()">在线解压</button> 
<p id="status"></p> 
<ul id="fileList"></ul> 
1.
2.
3.
4.
5.
6.
7.

const fileList = document.querySelector("#fileList"); 
const fileNameEle = document.querySelector("#fileName"); 
 
const request = axios.create({ 
  baseURL: "http://localhost:3000/", 
  timeout: 10000, 
}); 
 
async function unzipOnline() { 
  const fileName = fileNameEle.value; 
  if(!fileName) return; 
  const response = await request.get(`unzip/${fileName}`); 
  if (response.data && response.data.status === "success") { 
    const entries = response.data.entries; 
    let items = ""; 
    entries.forEach((zipEntry) => { 
      items += `<li class=${zipEntry.dir ? "caret" : "indent"}>${ 
        zipEntry.name 
      }</li>`; 
    }); 
    fileList.innerHTML = items; 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

router.get("/unzip/:name/entry", async (ctx) => { 
  const fileName = ctx.params.name; // ZIP压缩文件名 
  const entryPath = ctx.query.path; // 文件的路径 
  try { 
    const zip = new StreamZip.async({ file: path.join(ZIP_HOME, fileName) }); 
    const entryData = await zip.entryData(entryPath); 
    await zip.close(); 
    ctx.body = { 
      status: "success", 
      entryData: entryData, 
    }; 
  } catch (error) { 
    ctx.body = { 
      status: "error", 
      msg: `读取${fileName}中${entryPath}文件失败`, 
    }; 
  } 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

function toArrayBuffer(buf) { 
  let ab = new ArrayBuffer(buf.length); 
  let view = new Uint8Array(ab); 
  for (let i = 0; i < buf.length; ++i) { 
    view[i] = buf[i]; 
  } 
  return ab; 
} 
1.
2.
3.
4.
5.
6.
7.
8.

async function previewZipFile(path) { 
  const fileName = fileNameEle.value; // 获取文件名 
  const response = await request.get( 
    `unzip/${fileName}/entry?path=${path}` 
  ); 
  if (response.data && response.data.status === "success") { 
    const { entryData } = response.data; 
    const entryBuffer = toArrayBuffer(entryData.data); 
    const blob = new Blob([entryBuffer]); 
    // 使用URL.createObjectURL或blob.text()读取文件信息 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.