The purpose
Using JavaScript, I will retrieve the contents of a Zip file on a server without saving the files locally.
The general flow is as follows: (Files will not be saved locally)
- Fetch Zip file from server
- Get files from within the Zip file
- (Display image files)
I am using NodeJS. (It’s not strictly necessary as I’m using it for npm and a testing environment.)
Okay, here’s the English translation for that:
The following article introduces a method compatible with both RAR and ZIP.
However, the method described in the article below does not use npm, so package management may not be clear.
If you only need to use ZIP, the method in this article is recommended.
Install environment
日本語の文章を英語に翻訳します。
Execute the following command to install zip.js.
npm install "@zip.js/zip.js"The official documentation doesn’t include quotes, but when I ran it from the VSCode terminal without them, it failed.
Implementation
Downloading the Zip and Retrieving the Initial File
The implementation is as follows.
If you are not using npm, you would use import * as zip from "jsr:@zip-js/zip-js"; (unconfirmed).
It downloads and decompresses test.zip.
The first file stored in the Zip file will be saved in file_blob in Blob format.
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();
});Use File(image)
If the retrieved data is a JPEG image, you can display the file_blob using URL.createObjectURL.
(I have prepared an <img> tag with the ID downloaded in the HTML for display.)
if (firstEntry.filename.endsWith(".jpg") || firstEntry.filename.endsWith(".jpeg")) {
const img = document.getElementById("downloaded");
img.src = URL.createObjectURL(file_blob);
}Other Notes
Retrieving the Second and other Files
The return value of zipReader.getEntries() is an array of file information.
You can access the second file with zipReader.getEntries()[1].
about sub-folder
はい、承知いたしました。以下の文章を英語に翻訳します。
Files contained in subfolders are also included in the return value of zipReader.getEntries().
Conversely, folder information is not included in the return value of zipReader.getEntries(). (The filename of each file includes the folder path.)
Result
Using JavaScript, We were able to retrieve the contents of a Zip file on a server without saving the files locally and display image files.
Reference
comment