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

2019年8月4日 270次阅读

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

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

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

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

>从服务器下载zip文件.
>使用zip.js提取内存中的文件.
>使用createObjectUrl(解释为here)为每个资产创建URL.
>将iframe指向index.html生成的url.

这几乎是有效的,除了一个问题. createObjectUrl生成的url几乎是随机的,因此index.html无法解析对其他资源的引用.我怎么能绕过这个？

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

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

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

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

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

希望这可以帮助！

点赞