Things I want to do
This JavaScript code retrieves the contents of a Zip/RAR file on a server without saving them locally.
The general process is as follows: (No files will be saved locally.)
In addition to zip/rar, other libraries can be used.takes, gz, xz, Also available in Shinz2It appears to be compatible, but its operation has not been confirmed.
- Retrieve Zip/RAR files from the server (fetch)
- Retrieve files from a zip/RAR file
- (Display image file)
I am using NodeJS. (This is not mandatory as I am using it for testing purposes.)
The article below explains how to access the contents of a zip file using zip.js.
This approach uses npm, resulting in clearer package management.
While it doesn’t support RAR, this is a good option if you only need zip support.
Large RAR files cannot be read. This is a limitation of the libunrar version being used. It may be environment-dependent, but in my environment, files around 300MB become unreliable.
Split RAR files are not supported. This is because Unarchiver.js does not support them. libunrar does support them, so it should be possible to support them by modifying Unarchiver.js.
Environment setup
Download unarchiver.zip from the ‘download’ link at the top of the following page.
Extract the downloaded files to any folder within your project.
(Here, it was extracted to src/unarchiver.)
implementation
Loading the script
Add the following line to the HTML you are using to load the script.
It needs to be loaded before any JavaScript that uses unarchiver.
(Please change the src path to match your environment. If you are not using Node.js, it will not be a path from the root directory.)
<script src="/src/unarchiver/unarchiver.min.js"></script>It is correct not to specify a type. Specifying a module or similar will cause it to malfunction.
Downloading Zip/rar files and obtaining the initial file.
The implementation will be as follows:
I am downloading and extracting test.rar.
The first file stored in the Zip file will be saved in file_data format.
The file format can be used as a 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()File usage (images)
If the retrieved data is a JPEG image, you can display the retrieved file using URL.createObjectURL.
(An img tag with the ID ‘downloaded’ is provided in the HTML for display purposes.)
The above uses `file_data`, but instead of obtaining the File when specifying the argument to `createObjectURL`, the result is the same.
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());
}Other notes
Retrieving the second and subsequent files
archive.entries is an array of file information.[1]Then you can access the second file.
Regarding subfolders
Please note that zip and RAR files behave differently.
In the case of zip
Files in subfolders are also included in archive.entries.
Folder information is stored in zipReader.getEntries()It is not included.(The filename of each file includes the folder path.)
In the case of RAR
Files in subfolders are also included in archive.entries.
Folder information is stored in zipReader.getEntries()It is included.(The filename of each file includes the folder path.)
The folder entry returns false for .is_file and null for .read.
Result
I was able to use JavaScript to retrieve the contents of a Zip/RAR file on a server without saving them locally, and then display the image files.
Websites I used as references
コメント