如何通过浏览器从 .tar.gz 文件（存储在云中）中提取数据

Question

问题

我正在制作一个单页应用程序，它将其数据存储在主要云提供商的 blob 存储之一（例如 goggle 云存储）中。云存储中的数据是一个 .tar.gz 文件，我想从浏览器应用程序访问它。

tar 文件内有数百个文件，我只想获取其中一个文件并将其呈现为 HTML。我已经可以加载该文件，这只是“如何从中获取数据”。

毫不奇怪，我目前在单页应用程序中使用 typescript/javascript，但如果答案是“这样做”，情况可能会改变。

I'm not worried about browser compatibility (I can specify things like 'only works in this browser), but the browser doesn't have access to a file system and I can't 'shell out' to the operating system

What I have tried

I've had a look for npm packages, and the closest I've come to is https://github.com/npm/node-tar (but that seems to need a file system). I am reasonably confident working with streams, but it doesn't feel (after reviewing the documentation) that zlib will do what I want 'out of the box'. I didn't get a lot of hits from google searching: most just gave the same advice I would: 'shell out to the operating system and have that do it with tar', but I can't follow that advice in the browser

My alternative

If this doesn't work I will put a lambda/function in place to do the de-tarring. I like avoiding 'more moving parts' if I can in a project, but this might be needed.

Answer 1

通过结合使用pako（一个快速的 zlib JavaScript 端口）和js-untar：

<script src="pako.min.js"></script>
<script src="untar.js"></script>
<script>
fetch('test.tar.gz').then(res => res.arrayBuffer()) // Download gzipped tar file and get ArrayBuffer
                    .then(pako.inflate)             // Decompress gzip using pako
                    .then(arr => arr.buffer)        // Get ArrayBuffer from the Uint8Array pako returns
                    .then(untar)                    // Untar
                    .then(files => {                // js-untar returns a list of files (See https://github.com/InvokIT/js-untar#file-object for details)
                        console.log(files);
                    });
</script>

test.tar.gz 是通过在包含 3 个文本文件的目录上运行来创建的tar -czvf test.tar.gz test，以便能够检查目录和文件是否都显示在结果中。