Things I want to do
This JavaScript code retrieves the contents of a Zip file on a server without saving them locally.
The general process is as follows: (No files will be saved locally.)
- Retrieve (fetch) a Zip file from the server.
- Retrieve files from a zip file
- (Display image file)
I’m using NodeJS. (It’s not mandatory, as I’m using it for npm and a testing environment.)
The following article explains how to support both RAR and ZIP formats.
However, the method described in the article below does not use npm, so package management may not be clear.
If you are only using zip files, the method described in this article is recommended.
Environment setup
Install zip.js by running the following command.
npm install "@zip.js/zip.js"The official documentation doesn’t include the quotation marks, but when I ran it from the VS Code terminal without them, it failed.
implementation
Downloading the Zip file and obtaining the initial file.
The implementation will be as follows:
If you’re not using npm, you should use ‘import * as zip from ‘jsr:@zip-js/zip-js’;’ (unconfirmed).
Downloading and extracting test.zip.
The first file stored in the Zip file will be saved in Blob format as file_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();
});File usage (images)
If the retrieved data is a JPEG image, you can display the file blob using URL.createObjectURL.
(An img tag with the ID ‘downloaded’ is provided in the HTML for display purposes.)
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 subsequent files
The return value of zipReader.getEntries() is an array of file information.[1]Then you can access the second file.
Regarding subfolders
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 contains the folder path.)
Result
I was able to use JavaScript to retrieve files from a Zip file on a server without saving them locally, and then display the image files.
Websites I used as references
コメント