vue2.0+jsZip+file-saver 处理单文件流批量压缩

最近再公司项目中，遇到对文件流导出的操作，一番资料收集及实践后，最终实现了单文件流的单个导出及批量压缩，分享出来，希望能对需要的朋友提供思路。话不多说，以下是步骤：

1. 依赖安装

npm install jszip

npm install axios

npm install file-saver

2.导入依赖

  import axios from 'axios'

  import JSZip from 'jszip'

  const zip = new JSZip()

  import { saveAs } from 'file-saver'

3.在data中创建文件夹

data(){

  return {

    checks: [] //选中导出的项

    folders：zip.folder('images') //文件夹命名看自己喜欢

  }

}

4.选中导出对象

handleSelectionChange(row) {

    this.checks = row

},

5.这次后端提供的接口一次只能返回一个流文件，所以，在处理批量压缩的情况上还得取巧

（1）下载方法：

  /**

    * 下载

    * @param {Object} row

    * @param {Boolean} isBatch 是否批量下载 true:是 false:否

    */

    download(row, isBatch) {

      axios({

        method: 'POST',

        url: `后端提供的接口`,

        data: {

          id: row.id

        },

        headers: {

          Authorization: `bearer ${token}`

        },

        responseType: 'arraybuffer'

      })

        .then((response) => {

          const arrayBufferView = new Uint8Array(response.data)

          const blob = new Blob([arrayBufferView], { type: 'image/jpeg' })

          if (!isBatch) {

            saveAs(blob, `文件${row.sourceCode}`)

          } else {

            // 将文件流添加到文件夹中

            this.folders.file(`压缩包${row.sourceCode}.jpg`, blob, { base64: true })

            // 每添加一个文件记录+1

            this.currentNum += 1

            // 当执行完选中数量的文件后执行打包操作

            if (this.currentNum === this.checks.length) {

              zip.generateAsync({ type: 'blob' })

                .then(content => {

                  saveAs(content, ` 压缩包${this._RndNum()}`)

                })

              // 记录归零

              this.currentNum = 0

              // 打包结束后清空文件夹中的文件

              Object.keys(this.folders.files).forEach((key, index) => {

                if (index > 0) {

                  delete this.folders.files[key]

                }

              })

            }

          }

        })

        .catch(err => {

          console.log(err)

        })

    },

    //生成12位随机数

    _RndNum(n = 12) {

      var rnd = ''

      for (var i = 0; i < n; i++) {

        rnd += Math.floor(Math.random() * 10)

      }

      return rnd

    }

（2）如果是单文件导出，只需要调用：

  download(row,false)

（3）如果是批量导出及压缩，则调用：

  exportFileAll() {

      this.checks.map(el => {

          this.download(el, true)

      })

    }