VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(二)

温馨连接提示：vue中级之路篇系列教程：
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(一)
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(二)
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(三)

通过上一篇文章我们的项目架构基本就出来了，让大家去看看关于JSZip，以及store.js的知识，因为store比较简单，所以不做说明了，这里会着重讲讲JSZip的使用。JSZip因为其代码有些地方比较混乱，所以我们将对其部分功能进行重写。

####前言

在正式进行JSZip的说明之前，我们进入JSZip官网，如图：

乍一看全部英文，傻眼了，我也是英语比较差的一员，曾发誓此生绝不学英语的人，我只认识JS代码啊！于是去求助那些英语好的人，他们在旁边坐着给我翻译，我才知道这个鬼东西到底是什么玩意儿。

进来之后上面罗嗦了一推，告诉你很多语法，但是从来没有人告诉你这些语法有什么用，能搞什么，于是我只能猜了，大家一起猜

JSZip概述

首先他说要

var JSZip = require("jszip");

才能引用jszip，可是我们使用的VUE框架，用的编辑器是atom，还有严格的eslint语法校验ES6，而且只在需要的地方引用，所以不能这样引，同时他是使用这种方式：var zip = new JSZip();来创建zip对象的，所以我们把/page/property/upload_review.vue文件变为:

<template>
  <div>
    upload_review
  </div>
</template>
<script>
import JSZip from 'jszip'
export default {
  data () {
    return {
    }
  },
  created () { // 创建周期
    this.getBaseData() // 在创建周期时执行
  },
  methods:  {
    getBaseData () {
       var Zip = new JSZip()
       console.log(Zip)
    }
  }
}
</script>

在控制台我们可以看到，Zip的输出如下：

他的原型链上有十一个方法，这里我们使用它的loadAsync方法。从名字就知道这是用来异步加载的，我们点开这个方法：

看到这里，JS基础不好的同学应该会问[[scopes]]这个东西是什么？我只是告诉你这是域，这里我们不多加说明，有时间可以去看看你一直想知道的关于JavaScript scope的一切。我们不知道怎么用它的loadAsync方法，可以从官网上找，在我们打开的JSZip官网首页的最低下，如图:

我们可以看到Read a zip file怎么去读取zip文件.loadAsync(content).then(function (zip) {})，我们把/page/property/upload_review.vue文件变为:

<template>
  <div>
    upload_review
  </div>
</template>
<script>
import JSZip from 'jszip'
export default {
  data () {
    return {
    }
  },
  created () { // 创建周期
    this.getBaseData() // 在创建周期时执行
  },
  methods:  {
    getBaseData () {
       var Zip = new JSZip()
       console.log(Zip)
       var url = '/static/lookview.zip' // 引入静态文件
       Zip.loadAsync(url).then(function (zip) {
     
         console.log(zip)
       })
    }
  }
}
</script>

这里按理来说我们console.log(zip)输出的是加载完后的zip对象，但是却报错了Error: Can't find end of central directory : is this a zip file ?...，因为我们这样请求静态文件的方式是错误。

JSZip详解

因为方式错误，倒腾了很久才终于明白了，踩了无数的坑才明白究竟是怎么回事。于是，我们打开Read remote file，看到如图：

这里什么也没写，只告诉我们在这里右键—查看网页源代码，然后我们下翻到104行，如图：

我们可以看到这段代码

 //=========================
  // JSZipUtils
  //=========================
  JSZipUtils.getBinaryContent('/jszip/test/ref/text.zip', function(err, data) {
   
    var elt = document.getElementById('jszip_utils');
    if(err) {
      showError(elt, err);
      return;
    }

    try {
      JSZip.loadAsync(data)
      .then(function(zip) {
   
        return zip.file("Hello.txt").async("string");
      })
      .then(function success(text) {
   
        showContent(elt, text);
      }, function error(e) {
   
        showError(elt, e);
      });
    } catch(e) {
      showError(elt, e);
    }
  });

大家一定会疑问JSZipUtils.getBinaryContent是干什么的？我们翻到24行，可以看到他引用了一个叫jszip-utils.js的js，如下

<script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>

我们