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
      })
    },