ブラウザでZIPファイル展開

HTML&Script

    <div id="app">
        <div>
        <p>ZIPファイル</p>
        <input type="file" v-on:change="makeList" accept="application/zip"><br>
        </div>
        <div><p>{{strErr}}</p></div>
        <div>
        <p>展開後のファイル一覧</p>
        <ul style="list-style: none;">
            <li v-for="(item, index) in targetFiles"><button v-on:click="download(index);">{{item}}</button></li>
        </ul>
        </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script type="module">
        var vuejs = new Vue({
        el: "#app",
        data:{
        targetFiles: [],
        rawDatas:[],
        strErr:"",  
        },
        methods: {
        makeList: function(e) {
            this.strErr = "処理中です...";
            try {
            let zipfile = e.target.files[0];
            let fileReader = new FileReader();
            //ファイルの読み込みが終了した際の処理を先に記述
            fileReader.onload = function(evt) {
                let buffer = evt.target.result;
                let uint8Array = new Uint8Array(buffer);
                let unzip = new Zlib.Unzip(uint8Array);
                let tmpList = unzip.getFilenames();
    
                vuejs.targetFiles = []
                vuejs.rawDatas =[];
    
                for (let i =0; i < tmpList.length; i++) {
                //最後が/で終わっている場合はディレクトリ
                if (tmpList[i].slice(-1)==='/') {
                    continue;
                }
                //vuejs.targetFiles.push(tmpList[i]);
                //文字化け対応
                vuejs.targetFiles.push(Encoding.convert(tmpList[i],"UNICODE","AUTO"));
                let blob = new Blob([unzip.decompress(tmpList[i])],{type: "octet/stream"});
                vuejs.rawDatas.push(blob);
                }
                vuejs.strErr = "対象ﾌｧｲﾙをｸﾘｯｸするとﾀﾞｳﾝﾛｰﾄﾞが始まります";
            };
            //読み込み
            fileReader.readAsArrayBuffer(zipfile);
            } catch(er) {
            donothing
            this.strErr = er;
            console.log(er);
            }
        },
        download: function(intIndex) {
            let url = URL.createObjectURL(this.rawDatas[intIndex]);
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            a.href = url;
            //フォルダ階層を除去して名前を渡す
            a.download = this.targetFiles[intIndex].split('/').pop();
            a.click();
            URL.revokeObjectURL(url);
        },
        },
    })
    </script>
    <script>
    //zlib.js(JS ZIP展開ライブラリ)読み込み
    </script>
    <!--encoding.js(文字変換ライブラリ)読み込み(CDN)-->