如何最好使用 jszip 在 React 应用程序中读取 zip 文件内容答案

【问题标题】：How to read the zip file contents in react application using jszip preferably如何最好使用 jszip 在 React 应用程序中读取 zip 文件内容
【发布时间】：2020-06-22 14:22:16
【问题描述】：

我需要阅读 zip 文件的内容，这是 zip 文件夹的样子 Manifest.zip ，Manifest.zip 中的文件是 outline.png、publish.png、manifest.json。我需要在反应应用程序中动态读取 manifest.json（键值对）。

基本要求是当用户点击“maifest”链接时，需要显示一个弹出窗口，其中显示 UI 反应组件中的 manifest.json 内容。

我尝试使用JSZip库，代码如下

 var zip = new JSZip();
    zip.loadAsync("Manifest.zip")
      .then(function (zip) {
        console.log(zip.files);
        // Expected outline.png, publish.png, manifest.json
      });

我得到如下所示的错误？

【问题讨论】：

你现在实现的任何代码？
我暂时找不到任何与此相关的代码。

标签： javascript reactjs zip blob jszip

【解决方案1】：

看看this 库。看起来稳定且易于使用。

var AdmZip = require('adm-zip');

// reading archives
var zip = new AdmZip("./my_file.zip");
var zipEntries = zip.getEntries(); // an array of ZipEntry records

zipEntries.forEach(function(zipEntry) {

    console.log(zipEntry.toString()); // outputs zip entries information

});

【讨论】：

我们是否有它的类型脚本版本，当我这样做时会得到这个尝试npm install @types/adm-zip（如果存在）或添加一个包含declare module 'adm-zip';的新声明（.d.ts）文件
是的，github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/…
嘿，感谢您的回复，但 adm-zip 也在 fileSystem.js 内部使用 fs，我得到以下错误无法编译。我正在使用 webpack 捆绑和加载 ./node_modules/adm-zip/util/fileSystem.js 未找到模块：错误：无法解析 '...\client\packages\app-configuration\node_modules\ 中的 'fs' adm-zip\util'
嘿，感谢您的回复，但 adm-zip 也在 fileSystem.js 内部使用 fs，我得到以下错误无法编译。我正在使用 webpack 捆绑和加载 ./node_modules/adm-zip/util/fileSystem.js 未找到模块：错误：无法解析 '...\client\packages\app-configuration\node_modules\ 中的 'fs' adm-zip\util' 。当我也使用此处发布的 jszip 库时，我最终得到了相同的结果stackoverflow.com/questions/60629554/…
@DeepakKothari 您是否找到了从目录中读取 zip 文件的解决方案？如果你这样做了，你能分享一下你使用的概念吗

【解决方案2】：

不知道错误是什么，您尝试了另一个 zip 文件吗？

无论如何，这是我的带有 reactjs 钩子的 tsx 代码：

  const [files, setFiles] = useState<File[]>(undefined);
  const [fileInfo, setFileInfo] = useState<IFileInfo>(undefined);

  useEffect(() => {
    if (files) {
      const f = files[0];
      const dateBefore = new Date();
      JSZip.loadAsync(f) // 1) read the Blob
      .then((zip) => {
          const contents = [];
          zip.forEach((relativePath, zipEntry) => {  // 2) print entries
            contents.push(zipEntry.name);
          });
          const loadTime = moment(new Date()).diff(moment(dateBefore));
          setFileInfo({
            loadTime,
            contents: contents.sort(),
            error: null
          });
      }, (e) => {
        const loadTime = moment(new Date()).diff(moment(dateBefore));
        setFileInfo({
          loadTime,
          contents: [],
          error: "Error reading " + f.name + ": " + e.message
        });
      });
    }
  }, [files]);

  // below some code that adds a file to files with drag and drop interface

【讨论】：