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

问题描述

问题

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

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

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

我不担心浏览器兼容性（我可以指定诸如“仅在此浏览器中有效”之类的内容），但浏览器无法访问文件系统，我也无法“壳”到操作系统

我的尝试

我找过 npm 包，最接近的是 https://github.com/npm/node-tar （但这似乎需要一个文件系统）。我对使用流很有信心，但是（在查看文档之后）我并不觉得 zlib 会“开箱即用”做我想做的事情。我没有从谷歌搜索中得到很多点击：大多数人只是给出了与我相同的建议：'向操作系统掏出并用 tar 来做'，但我无法在浏览器中遵循该建议

我的选择

如果这不起作用，我将放置一个 lambda/函数来进行去焦油。如果可以的话，我喜欢避免在项目中使用“更多活动部件”，但这可能是需要的。

解决方法

使用 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 生成的，以便能够检查结果中是否显示了目录和文件。

javascript single-page-application tar