如何在React中使用zip.js

npm install zip.js

import zip from 'zip.js';

import React, { useState } from 'react';
import zip from 'zip.js';

const App = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleCompress = () => {
    if (file) {
      zip.createWriter(new zip.BlobWriter(), (writer) => {
        writer.add(file, (entry) => {
          writer.close((blob) => {
            // 压缩完成后的回调函数
            // 可以将blob保存为文件或上传到服务器
            console.log(blob);
          });
        });
      }, (error) => {
        console.error(error);
      });
    }
  };

  const handleDecompress = () => {
    if (file) {
      zip.createReader(new zip.BlobReader(file), (reader) => {
        reader.getEntries((entries) => {
          if (entries.length) {
            entries[0].getData(new zip.BlobWriter(), (blob) => {
              // 解压缩完成后的回调函数
              // 可以将blob保存为文件或展示在页面上
              console.log(blob);
            });
          }
        });
      }, (error) => {
        console.error(error);
      });
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleCompress}>压缩</button>
      <button onClick={handleDecompress}>解压缩</button>
    </div>
  );
};

export default App;