vue 本地图片批量下载以及压缩成zip文件下载

 

// 数据初始化
selectedRows = [{
    id: '1212313',
    name: '1号',
    qrcodeUrl: '"http://duoduoping-qiniu.landdt.cn/16239812769941405433547020722178.jpg"'
}, {
    id: '1212314',
    name: '2号',
    qrcodeUrl: '"http://duoduoping-qiniu.landdt.cn/16239812769941405433547020722178.jpg"'
}]

一、 批量下载图片

图片直接下载，利用循环a标签进行文件下载。（这样是图片一个一个进行下载）

batchQrCodeLocal () {
      if (this.selectedRows.length === 0) {
        this.$notification.warning({
          message: '请先勾选下载数据!'
        })
        return
      }
      for (let i = 0; i < this.selectedRows.length; i++) {
        axios.post(this.selectedRows[i].qrcodeUrl, {}, {
          responseType: 'blob' // 设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
        }).then(res => {
          console.log(res)
          const mimeType = 'image/png'
          const aLink = document.createElement('a')
          var blob = new Blob([res.data], { type: mimeType })
          aLink.style.display = 'none'
          aLink.setAttribute('href', URL.createObjectURL(blob))
          aLink.setAttribute('target', '_blank')
          aLink.setAttribute('download', this.selectedRows[i].name + this.selectedRows[i].id) // 设置下载文件名称
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(aLink.href)
        })
      }
    },

 

二、图片批量处理成压缩包后进行下载zip文件

下载图片文件后存进zip，然后生成二进制流，利用file-saver保存文件。

// 需要的依赖包
import axios from 'axios'
import FileSaver from 'file-saver'
import JSZip from 'jszip'

// methods
    getFile (url) {
      return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url,
            responseType: 'blob'
        }).then(response => {
            resolve(response.data)
        }).catch(error => {
            reject(error.toString())
        })
      })
    },
    batchQrCodeZip () {
      if (this.selectedRows.length === 0) {
        this.$notification.warning({
          message: '请先勾选下载数据!'
        })
        return
      }
      this.exportLoading = true
      const zip = new JSZip()
      const _this = this
      const promises = []
      const cache = {}
      for (const item of this.selectedRows) {
        const promise = _this.getFile(item.qrcodeUrl).then(data => { // 下载文件, 并存成ArrayBuffer对象
            // const file_name = item.realName // 获取文件名
            zip.file(item.realName + '.png', data, { binary: true }) // 逐个添加文件，需要加后缀".png"
            cache[item.realName] = data
        })
        promises.push(promise)
      }
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then(content => {
            // 生成二进制流
            FileSaver.saveAs(content, '人员二维码') // 利用file-saver保存文件  自定义文件名
            _this.$notification.success({
              message: '下载完成!'
            })
        })
        _this.exportLoading = false
      }).catch(res => {
        _this.$notification.warning({
          message: '文件下载失败!'
        })
        _this.exportLoading = false
      })
    },