客户端如何提取zip文件并呈现内容

Question

我有一个zip文件位于http://my-website.com/user-site.zip。该zip文件包含一堆html，css和javascript文件，这些文件在提取后看起来像这样（确切内容未知）：

index.html
js/
  script.js
css/
  style.css

我希望能够在浏览器中下载此网页后，例如在iframe中查看该网页。

现在，我的方法如下所示：

1. 从服务器下载zip文件。
2. 使用zip.js提取内存中的文件。
3. 使用createObjectUrl（此处解释）为每个资产创建URL。
4. 将iframe指向由生成的网址index.html。

除一个问题外，这几乎可行。由生成的url createObjectUrl几乎是随机的，因此index.html无法解析对其他资源的引用。我该如何解决？

Answer 1

非常好的问题！我现在正坐在这里思考这个问题！您可以做的一件事是创建一个 JavaScript 对象/数组来“映射”文件及其路径，以及它们创建的对象 URL。然后使用 JavaScript 将相对路径替换为绝对对象 URL。除非...你无法获取文件的路径。

如果是这种情况，您可能感兴趣的 JavaScript 库是JSZip，它可以为您提供 ZIP 中文件的路径。

对于您的地图，您可以执行以下操作（在从 JSZip 路径（如根目录）中删除必要的部分之后）：

var map = [
    {"relativePath":"css.css","absolutePath":*Object URL Goes Here*}
];

然后循环遍历映射中的每个条目，并用给定文件中的absolutePath[x] 替换relativePath[x] 的每个实例，无论是文件的原始文本还是iframe 的innerHTML。

希望这可以帮助！