plunkerでjszip

概要

plunkerでjszipやってみた。
解凍してみた。

写真

サンプルコード

'use strict'
const fileListUl = document.getElementById('file-list')
const updateFileName = (fileName) => document.getElementById('file-name').innerHTML = fileName
const clearResult = () => {
  updateFileName('')
  fileListUl.innerHTML = ''
}
const loadZip = async (f) => {
  updateFileName(f.name)
  const zip = await JSZip.loadAsync(f)
  zip.forEach((relativePath, zipEntry) => {
    const div = document.createElement('div')
    div.innerHTML = zipEntry.name
    div.title = relativePath
    div.onclick = async () => {
      const stringContent = await zipEntry.async('text')
      document.getElementById('inner-file-name').innerHTML = zipEntry.name
      document.getElementById('file-content').innerHTML = stringContent.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
    }
    fileListUl.appendChild(div)
  })
}
document.getElementById('file').onchange = (evt) => {
  clearResult()
  loadZip(evt.target.files[0])
}

成果物

以上