やりたいこと
javascriptでサーバー上のZipファイルの中身のファイルををローカルに保存せずに取得します。
大まからな流れは以下のようになります。（ローカルにファイルは保存しません）
- サーバーからZipファイルを取得(fetch)
- zipファイルから中のファイルを取得
- （画像ファイルを表示）
NodeJSを使用しています。(npmと試験環境のために使用しているので必須ではないです。)
RAR/ZIPともに対応する方法を以下の記事で紹介しています。
しかし下の記事の方法はnpmを使用しないため、パッケージ管理が明確でない可能性があります。
zipのみの使用の場合、本記事の方法がおすすめです。
環境構築
以下のコマンドを実行してzip.jsをインストールします。
npm install "@zip.js/zip.js"オフィシャルのドキュメントには””がありませんが、””をつけずにVSCodeのターミナルから実行すると失敗しました。
実装
Zipのダウンロードとはじめのファイルの取得
実装は以下のようになります。
npmを使用しない場合は”import * as zip from “jsr:@zip-js/zip-js”;”とするそうです。（未確認）
test.zipをダウンロードして解凍しています。
file_blobにZipファイルに格納されている最初のファイルがBlob形式で保存されます。
import * as zip from "@zip.js/zip.js";
const req = new Request("test.zip");
fetch(req)
.then((res) => res.blob())
.then(async (blob_data) => {
const zipFileReader = new zip.BlobReader(blob_data);
const writer = new zip.BlobWriter();
const zipReader = new zip.ZipReader(zipFileReader);
const firstEntry = (await zipReader.getEntries()).shift();
const file_blob = await firstEntry.getData(writer);
await zipReader.close();
});ファイルの使用（画像）
取得したデータがjpeg画像の場合はfile_blobをURL.createObjectURLを使用して表示することができます。
（HTMLに表示用のIDがdownloadedのimgタグを用意しています）
if (firstEntry.filename.endsWith(".jpg") || firstEntry.filename.endsWith(".jpeg")) {
const img = document.getElementById("downloaded");
img.src = URL.createObjectURL(file_blob);
}その他 メモ
２つ目以降のファイルの取得
zipReader.getEntries()の返り値はファイル情報の配列です。zipReader.getEntries()[1]で２個目のファイルにアクセスできます。
サブフォルダに関して
サブフォルダに含まれるファイルもzipReader.getEntries()の返り値に含まれます。
逆にフォルダの情報はzipReader.getEntries()の返り値には含まれません。（各ファイルのfilenemeにはフォルダパスが含まれています）
結果
javascriptでサーバー上のZipファイルの中身のファイルををローカルに保存せずに取得、画像ファイルを表示することができました。
参考にさせていただいたサイト
コメント