2021年8月13日

How to uncompressed GZIP at front-end using Javascript

It's been a while I haven't share my coding work. In this article I would like to share how to receive a Gzip file via stream, unzip it, and then of course after unzipping it, we need to use the data, the data should also be converted in JSON format.


If you quickly google the keyword "javascript gzip", you will find a library called "Pako", Yes, this is what I use for uncompressing the file.

OK, so now we solved the most difficult part of this work, we will back to how to receive a stream of data

Main steps
1. Using await fetch to access link.
2. Using stream reader and while loop in order to know the status.
3. If you print out each reading value, you will see a lot of Unit8Array.
4. Assembly all you received Unit8Array.
5. Throw the re-assembly Unit8Array into Poka unzip function. 
6. Converting unzip result into JSON format using JSON.parse();

HERE is the code

   try {
        const res = await fetch(YOURURL);
        const streamReader = res.body.getReader();

        let result;
        let temp_array = [];

        while (!(result = await streamReader.read()).done) {
            temp_array.push(result.value);
        }


        if (result.done) {

            let array_length = 0;
            for (let i = 0; i < temp_array.length; i++) {
                array_length += parseInt(temp_array[i].length);
            }

            let mergeArray = new Uint8Array(array_length);
            let offset = 0;
            temp_array.forEach(function (item) {
                mergeArray.set(item, offset);
                offset += item.length;
            })

            var unzip = pako.ungzip(mergeArray, { to: 'string' });
            var jsonFormat = JSON.parse(unzip);
        }

    } catch (err) {
        console.error(err);
    }
  

沒有留言:

張貼留言

<Javascript> How to uncompressed GZIP at front-end using Javascript

It's been a while I haven't share my coding work. In this article I would like to share how to receive a Gzip file via stream, unzip...