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

Question

问题

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

在tar文件中会有数百个文件，我只想获取其中一个文件并将其渲染成HTML。我已经可以加载文件了，它只是 'how do I get the data out of it'.

不出所料，我目前在单页应用程序中使用 typescript/javascript，但如果答案是 'do it this way'，那可能会改变。

我不担心浏览器的兼容性（我可以指定“仅适用于此浏览器”之类的内容），但浏览器无法访问文件系统，我无法 'shell out'操作系统

我试过的

我查找过 npm 包，最接近的是 https://github.com/npm/node-tar（但这似乎需要一个文件系统）。我相当有信心使用流，但是（在查看文档之后）感觉 zlib 不会做我想做的事 'out of the box'。我没有从 google 搜索中得到很多结果：大多数只是给出了与我相同的建议：'shell out to the operating system and have that do it with tar'，但我无法在浏览器中遵循该建议

我的选择

如果这不起作用，我将放置一个 lambda/function 来执行 de-tar 环。如果可以的话，我喜欢在项目中避免 'more moving parts'，但这可能是需要的。

Answer 1

结果应该可以通过使用 pako (a fast zlib JavaScript port) and 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 是由运行 tar -czvf test.tar.gz test 在一个包含 3 个文本文件的目录上创建的，以便能够检查目录和文件是否都显示在结果中。

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

How do I extract data from a .tar.gz file (stored in the cloud) from a browser

javascript

tar

single-page-application