やりたいこと
javascriptでサーバー上のZip/RARファイルの中身のファイルををローカルに保存せずに取得します。
大まからな流れは以下のようになります。（ローカルにファイルは保存しません）
使用するライブラリはzip/rar以外にもtar, gz, xz, bz2にも対応しているようですが動作未確認です。
- サーバーからZip/RARファイルを取得(fetch)
- zip/RARファイルから中のファイルを取得
- （画像ファイルを表示）
NodeJSを使用しています。(試験環境のために使用しているので必須ではないです。)
下の記事ではzip.jsを使用してzipファイルの中身を参照する方法を紹介しています。
こちらの方が、npmを使用しているためパッケージ管理が明確です。
RARには対応していませんがzipだけの対応で十分の場合はこちらがおすすめです。
環境構築
以下のページの画面上部downloadからunarchiver.zipをダウンロードします。
ダウンロードしたファイルをプロジェクト内の任意のフォルダに解凍します。
（ここではsrc/unarchiverに解凍しました。）
実装
Scriptの読み込み
使用するHTMLに以下の１行を追加してScriptを読み込みます。
unarchiverを使用するJSよりも先に読み込まれる必要があります。
（srcのパスは環境に合わせて変更してください。node.jsを使用しない場合はRootからのパスにはなりません。）
<script src="/src/unarchiver/unarchiver.min.js"></script>typeは指定しないのが正しいです。moduleなどを指定すると動作しません。
Zip/rarのダウンロードとはじめのファイルの取得
実装は以下のようになります。
test.rarをダウンロードして解凍しています。
file_data にZipファイルに格納されている最初のファイルがFile形式で保存されます。
File形式はblobとして使用可能です。
await Unarchiver.load();
let url = 'test.rar';
const data = await fetch(url);
const blob = await data.blob();
const file = new File([blob], url.split('/').pop(), { type: blob.type });
const archive = await Unarchiver.open(file);
const entry = archive.entries[0]
const file_data = await entry.read()ファイルの使用（画像）
取得したデータがjpeg画像の場合は取得したFileをURL.createObjectURLを使用して表示することができます。
（HTMLに表示用のIDがdownloadedのimgタグを用意しています）
上記で使用したfile_dataではなく createObjectURLの引数指定時にFileを取得していますが同じです。
const entry = archive.entries[0]
//const file_data = await entry.read()
if (entry.is_file && (entry.name.endsWith(".jpg") || entry.name.endsWith(".jpeg"))) {
const img = document.getElementById("downloaded");
img.src = URL.createObjectURL(await entry.read());
}その他 メモ
２つ目以降のファイルの取得
archive.entriesはファイル情報の配列です。archive.entries[1]で２個目のファイルにアクセスできます。
サブフォルダに関して
zipとRARでは動作が異なるようなのでご注意ください。
zipの場合
サブフォルダに含まれるファイルもarchive.entriesに含まれます。
フォルダの情報はzipReader.getEntries()に含まれません。（各ファイルのfilenemeにはフォルダパスが含まれています）
RARの場合
サブフォルダに含まれるファイルもarchive.entriesに含まれます。
フォルダの情報はzipReader.getEntries()に含まれます。（各ファイルのfilenemeにはフォルダパスが含まれています）
フォルダのEntryは.is_fileがfalseであり.readはnullを返します。
結果
javascriptでサーバー上のZip/RARファイルの中身のファイルををローカルに保存せずに取得、画像ファイルを表示することができました。
参考にさせていただいたサイト
コメント