浏览器解压措施详解

浏览器端在线解压 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) => { 

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!