【pako】JavaScriptでzlib圧縮／解凍する【使い方】

zlib圧縮/解凍をJavaScriptでやりたい。

そんな時に使いやすいのを見つけました。

その名も pako というライブラリ

データとかファイルの圧縮と解凍、
そのやり方などをまとめておきます。

このページの目次

pakoはDeflate圧縮用zlibライブラリ
pakoの読み込み or インストール
テキストをzlib圧縮／解凍する
ファイルをzlib圧縮／解凍する

pakoはDeflate圧縮用zlibライブラリ

はじめにDeflateとかzlibの基礎知識について。

pakoはzlibに完全語感があります。
zlibとはDeflate圧縮用のライブラリのこと

▼ Deflate圧縮ってなんだ？

Deflate（デフレート）とはLZ77とハフマン符号化を組み合わせた可逆データ圧縮アルゴリズム。フィル・カッツが開発した圧縮ツールPKZIPのバージョン2で使われていた。ZIPやgzipなどで使われている。1996年5月に RFC 1951 としてドキュメント化された。ヘッダーやフッターをつけた zlib (RFC 1950) 形式や gzip (RFC 1952) 形式とともに使われる事が多い。

引用元 : https://ja.wikipedia.org/wiki/Deflate

Deflateとは圧縮アルゴリズムのこと、
zlibやgzipをそれを使うライブラリのことです。

pakoはデータに対してDeflate圧縮を実行し、
それをUint8Arrayとしてzlib形式で取得できます。

pakoの読み込み or インストール

Node.js or ブラウザ単独どちらでも動かせます。

▼ GitHub : nodeca/pako

GitHub

GitHub - nodeca/pako: high speed zlib port to javascript, works in browser &a...

https://github.com/nodeca/pako

high speed zlib port to javascript, works in browser & node.js - nodeca/pako

▼ npmからインストールする場合

npm install pako

1	npm install pako

▼ ブラウザ側で動かす場合

<script src="
https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js
"></script>

<script src="

https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js

"></script>

紹介するのはブラウザ側で動かす前提のコードです。

ですがNode.js版でもほとんど変わりません。

テキストをzlib圧縮／解凍する

pakoでは次のように圧縮データを扱います。

元データはUint8Arrayへの変換が必要
圧縮データはUint8Arrayとして返される

それに注意してテキストを圧縮してみます。

▼ とてもシンプルな圧縮例

/// 圧縮元のテキスト
const input = "Hello World";
/// Deflate圧縮実行
const compressed = pako.deflate(input);
console.log('compressed : ', compressed);
   /// => compressed : Uint8Array(19)

try {
  /// 上記の圧縮データを解凍
  const decompressed = pako.inflate(compressed);
  /// バイト配列をテキストとして復元
  const output = new TextDecoder().decode(decompressed);
  console.log('output : ', output);
    /// => output :  Hello World
} catch (err) {
  console.log(err);
}

/// 圧縮元のテキスト

const input = "Hello World";

/// Deflate圧縮実行

const compressed = pako.deflate(input);

console.log('compressed : ', compressed);

/// => compressed : Uint8Array(19)

try {

/// 上記の圧縮データを解凍

const decompressed = pako.inflate(compressed);

/// バイト配列をテキストとして復元

const output = new TextDecoder().decode(decompressed);

console.log('output : ', output);

/// => output : Hello World

} catch (err) {

console.log(err);

}

テキストの圧縮解凍はこのようになります。

ファイルをzlib圧縮／解凍する

次はバイナリも含めたファイルの圧縮解凍

▼ たとえば次のHTMLを用意します。

<div>
  <span>ファイルをアップロード</span><br>
  <input type="file" class="inputFile">
</div>

<div>

<span>ファイルをアップロード</span><br>

</div>

ファイル選択用の input[type=file] です。

そして選択されたファイルをzlib圧縮し、
そのあと自動ダウンロードするコードがこれです。

▼ こちらのコード

/// ファイル選択input取得
const $inputFile = document.querySelector('.inputFile');
/// ファイル選択イベント
$inputFile.onchange = (e)=>{
  const inputFile = e.target.files[0];
  if (inputFile) {
    /// fileをUint8Arrayに変換
    inputFile.arrayBuffer().then(buff => {
      /// Deflate圧縮
      const output = pako.deflate(new Uint8Array(buff));

      /// zlibファイルとしてダウンロード実行
      const urlUtil = window.URL || window.webkitURL;
      const dataUrl = urlUtil.createObjectURL(new Blob([output]));
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = 'output.zlib';
      document.body.appendChild(link); 
      link.click(); document.body.removeChild(link)
    });
  }
};