ブラウザ上でzip圧縮

ブラウザ上だけでファイルやデータをzip圧縮する方法のメモです。

ブラウザ上でzip圧縮
サンプルコード
実行

サンプルコード

以下のサンプルでは、ブラウザ画面上のファイルINPUTでファイルを入力すると、それをzip圧縮したzipファイルをダウンロード風に出力します。処理は全てブラウザローカルだけで完結しています。 zip圧縮ライブラリにはJSZipモジュールを利用しています。 (動作確認はChromeブラウザのみ)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>
  <input type="file" oninput="onFileInput(event)">
  <script src="https://cdn.jsdelivr.net/npm/jszip@3.7.1/dist/jszip.min.js" integrity="sha256-yeSlK6wYruTz+Q0F+8pgP1sPW/HOjEXmC7TtOiyy7YY=" crossorigin="anonymous"></script>
  <script type="text/javascript">
  /**
   * ファイル入力ハンドラ
   * @param  {Event} e
   */
  function onFileInput(e) {
    const filename = "example.zip";
    const file = e.target.files && e.target.files.length >= 1 ? e.target.files[0] : null;
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      // ファイル内容:
      const content = new Uint8Array(e.target.result); // as blob
      // const content = e.target.result; // as text
      return zipcompress([
        ["foo/" + file.name, content], // zip内のfoo/配下に読み込んだ内容を設置
        // 圧縮対象ファイルの複数指定も可能:
        // ["aaa.txt", "helloworld!"],
        // ["bbb/bbb.txt", "helloworld!"],
      ], (err, result) => {
        return download(result, filename);
      });
    };
    reader.readAsArrayBuffer(file); // read as arraybuffer
    // reader.readAsText(file); // read as text
  }
  /**
   * [汎用] ブラウザでのダウンロード処理
   * @param  {String|Uint8Array} content
   * @param  {String} filename - filename of output data.
   */
  function download(content, filename) {
    // create a temporary "a" element.
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display:none";
    const blob = new Blob([content], { type: "octet/stream" });
    // or
    // const blob = new Blob([new Uint8Array([72, 101, 108, 108, 111])], {...});
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url); // release the used object.
    a.parentNode.removeChild(a); // delete the temporary "a" element
  }

  /**
   * zip圧縮したデータを返します。
   * @param  {Array<[path,data]>}   pathAndDataList
   * @param  {Function} cb
   * @return {Blob}
   */
  function zipcompress(pathAndDataList, cb) {
    if (typeof JSZip === "undefined")
      throw Error("JSZip must be installed.");
    const zip = new JSZip();
    for (let len = pathAndDataList.length, i = 0; i < len; i++) {
      const [filename, data] = pathAndDataList[i];
      zip.file(filename, data);
    }
    return zip.generateAsync({
      type: "blob",
      compression: "DEFLATE",
      compressionOptions: {
        /* compression level ranges from 1 (best speed) to 9 (best compression) */
        level: 9
      },
    }).then(function(content) {
      return cb && cb(null, content); // content is blob type.
    });
  }
  </script>
</body>

</html>

実行

以上です。