JSZipは、JavaScriptでZIPファイルを作成・読み込み・編集できるライブラリです。
ブラウザ上で複数の画像やテキストをまとめてZIPにしたいときに便利です。
JSZipとは？
JSZipは、JavaScriptでZIPファイルを扱うためのライブラリです。
通常、ZIPファイルの作成はサーバー側で行うことが多いですが、JSZipを使うとブラウザだけでZIPを作ることができます。
JSZipをCDNで読み込む
HTMLで使う場合は、CDNから読み込むのが簡単です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>このscriptタグをHTMLに追加すると、JSZip が使えるようになります。
ZIPファイルを作成する基本コード
最小構成のコードは次の通りです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script> const zip = new JSZip(); zip.file("hello.txt", "こんにちは、JSZip！"); zip.generateAsync({ type: "blob" }).then(function(content) { const a = document.createElement("a"); a.href = URL.createObjectURL(content); a.download = "sample.zip"; a.click(); URL.revokeObjectURL(a.href); }); </script>このコードでは、hello.txt というテキストファイルをZIPに入れて、sample.zip としてダウンロードします。
複数ファイルをZIPに入れる
複数のファイルを入れたい場合は、zip.file() を複数回呼びます。
const zip = new JSZip(); zip.file("readme.txt", "説明文です"); zip.file("data.json", JSON.stringify({ name: "sample" }, null, 2)); zip.file("memo.txt", "メモです"); const blob = await zip.generateAsync({ type: "blob" });フォルダを作ってファイルを入れる
ZIP内にフォルダを作ることもできます。
const zip = new JSZip(); const folder = zip.folder("images"); folder.file("note.txt", "画像フォルダの説明です"); const blob = await zip.generateAsync({ type: "blob" });ブラウザで選択したファイルをZIP化する
ユーザーが選んだファイルをZIPにまとめる例です。
<input type="file" id="files" multiple> <button id="download">ZIPで保存</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script> document.getElementById("download").addEventListener("click", async () => { const input = document.getElementById("files"); const zip = new JSZip(); for (const file of input.files) { zip.file(file.name, file); } const blob = await zip.generateAsync({ type: "blob" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "files.zip"; a.click(); URL.revokeObjectURL(a.href); }); </script>JSZipでよく使うメソッド
よく使うメソッドは次の通りです。
- new JSZip(): ZIPを作る
- zip.file(name, data): ファイルを追加する
- zip.folder(name): フォルダを作る
- zip.generateAsync(options): ZIPを生成する
- JSZip.loadAsync(file): ZIPを読み込む
注意点
大きすぎるファイルを大量に処理すると、ブラウザが重くなることがあります。
また、ユーザーの環境によってはメモリ不足になる場合もあります。大量の画像をZIP化する場合は、進捗表示やファイル数の制限を用意すると親切です。
まとめ
JSZipを使うと、ブラウザだけでZIPファイルを作成できます。
CDNで読み込み、new JSZip() でZIPを作り、zip.file() でファイルを追加し、generateAsync({ type: “blob” }) でダウンロード用のデータを作るのが基本です。