// 数据初始化
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 }) },