Temporarily Unzip A File To View Contents Within A Browser

I want to unzip a file that contains an html page, css, and js directories. I want to unzip this temporarily and view the html in an iFrame, preferrably. I am using jszip which is

Solution 1:

If the html/js in the zip is not too complicated, for instance an AngularJS app that has routes for partials, this is possible.

The trick is to replace css,js,img src/href urls that point to a file in the zip with either:

• Object Url: URL.createObjectURL(Blob or File object);
• Data Url: data:[<mediatype>][;base64],<data>
• Or in the case of js and css inject the content directly into the appropriate element

After replacing the src/href references than just inject the new html into the iframe.

Step 1: Parse the html so you can manipulate it

//html from a call like zip.file("index.html").async("string")
let parser = new DOMParser;
let doc = parser.parseFromString(html,"text/html");

Step 2: Find all elements with a relative path (e.g. /imgs/img.jpg) as they are easier to deal with as you can then use that path for zip.file

//Simply finds all resource elements, then filters all that dont start with '/'
var elements = jQuery("link[href],script[src],img[src]",doc).filter(function(){
   return /^\//.test(this.href || this.src);
});

Step 3: Replace src,href with object url, data url, or direct content

//assume element is the html element: <script src="/js/main.js"></script>
zip.file(element.src).async("string").then(jsText=>{
   element.src = "data:text/javascript,"+encodeURIComponent(jsText);
});

Step 4: Get the new html text and inject it into the iframe

let newHTML = doc.documentElement.outerHTML;
var viewer = document.querySelector('#iframeID');
viewer = viewer.contentWindow || viewer.contentDocument.document || viewer.contentDocument;

viewer.document.open();
viewer.document.write(html);
viewer.document.close();

JSFiddle Demo - Demonstrates replacing the src/href urls

As a security note, if you are using zip files that you do not know the contents of, you should run the whole app in a protected iframe