前端(JS\VUE)JSZIP读取压缩包文件内容,JSZIP解决乱码

主要需要需要安装jszip

npm i jszip -S

下面是用vue 做为演示(如果只用vue其实可以省略jquery)

<template>
  <div>
    <h3>选择一个压缩文件</h3>
    <input type="file" id="file" name="file" multiple /><br />

    <div id="result_block" class="hidden">
      <h3>压缩包中文件列表 :</h3>
      <div id="result"></div>
    </div>
  </div>
</template>

<script>
import JSZip from "jszip";
import $ from "jquery";
export default {
  methods: {
    handleFile(f) {
      let _this = this;
      //显示Zip名和创建filesname的ul容器
      var $title = $("<h4>", {
        text: f.name,
      });
      var $fileContent = $("<ul>");
      $("#result").append($title);
      $("#result").append($fileContent);

      // 1) read the Blob
      JSZip.loadAsync(f).then(
        function (zip) {
          // var dateAfter = new Date();
          // $title.append($("<span>", {
          //     "class": "small",
          //     text:" (loaded in " + (dateAfter - dateBefore) + "ms)"
          Object.keys(zip.files).forEach((item) => {
            if (item.slice(item.lastIndexOf(".")) == ".json") {
              zip.files[item].async("blob").then(function (blob) {
                _this.readTextAs(blob, "utf-8", function (error, text) {
                  $("#result").html(`<p>文件:${item} 的内容</p>` + text);
                  console.log(JSON.parse(text));
                });
              });
            }
          });

          // zip.files['sssss.txt'].async("string").then(function(con){
          //     console.log(con);
          // })
        },
        function (e) {
          $("#result").append(
            $("<div>", {
              class: "alert alert-danger",
              text: "Error reading " + f.name + ": " + e.message,
            })
          );
        }
      );
    },
    readTextAs(arrayBuffer, encoding, callback) {
      var reader = new FileReader();
      // EDIT : see my other comment below
      // var blob = JSZip.utils.arrayBuffer2Blob(arrayBuffer);
      var blob = new Blob([arrayBuffer]);
      reader.onload = function (evt) {
        callback(null, evt.target.result);
      };
      reader.onerror = function (evt) {
        callback(evt.error, null);
      };
      reader.readAsText(blob, encoding);
    },
  },
  mounted() {
    let _this = this;
    $("#file").on("change", function (evt) {
      $("#result").html("");
      $("#result_block").removeClass("hidden").addClass("show");
      var files = evt.target.files;
      for (var i = 0; i < files.length; i++) {
        _this.handleFile(files[i]);
      }
    });
  },
};
</script>

<style>
code {
  display: block;
  padding: 10px;
  background: #eee;
}
</style>