浏览器解压措施详解

副标题#e#

浏览器端在线解压 ZIP 文件的功能，可以拆分为 下载 ZIP 文件、解析 ZIP 文件和展示 ZIP 文件 3 个小功能。考虑到功能复用性，阿宝哥把下载 ZIP 文件和解析 ZIP 文件的逻辑封装在 ExeJSZip 类中：

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(); 

    } 

  } 

} 

2.2 在线解压 ZIP 文件

利用 ExeJSZip 类的实例，我们就可以很容易实现在线解压 ZIP 文件的功能：

html 代码

<p> 

  <label>请输入ZIP文件的线上地址：</label> 

  <input type="text" id="zipUrl" /> 

</p> 

<button id="unzipBtn" onclick="unzipOnline()">在线解压</button> 

<p id="status"></p> 

<ul id="fileList"></ul> 

JS 代码

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) => { 

#p#副标题#e#

    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 = "文件已下载，努力解压中";