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

Question

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

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

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

现在我的方法看起来像这样：

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

这个几乎有效，除了一个问题。 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。

希望这有帮助！