don’t need all of the files from zip.js to make this work. You only
need these 4 files listed below. Copy them into your Angular project.
Put them in your
src/assets folder as you need them copied into your build output.
The files need to be copied across into the build, because they are loaded directly by the browser to register as a web worker. Linking the scripts directly from the built assets folder is the easiest method I found to do this.
I actually used a separate
lib/zip folder, rather than putting them in with my app assets. I then edited my
angular.json file so that the scripts are copied across into the build.
zip.js file is then added to your main
index.html by adding this before the closing
I then created a few interfaces, to make it nicer to work with in TypeScript:
I then wrapped the zip.js in a service so I could inject it into my Angular components where needed:
To use this example, inject into another Angular component or service. Then, call
getFiles() passing in the file as an argument. For example, pass in a
File object as retrieved from the change event on a file input:
<input type="file" (change)="fileChanged($event)">
const file = event.target.files;
The observable returned by
getFiles() resolves to an array of
ZipEntry items as defined in the above interface. You can then pass an item from the array to the
getData() method on
ZipService to unzip and retrieve the data.