vuejs+JSZip实现批量图片压缩成zip包并下载到本地
1、使用第三方插件JSZip，安装JSZip
npm i JSZip
2、具体实现逻辑
①页面引入
npm i JSZip
2、具体实现逻辑
①页面引入
import JSZip from 'jszip'
②方法
batchQrCodeZip(){
let that = this
let zip = new JSZip()
const promises = []
const cache = {}
//批量导出图片，this.selectedItem为数组对象 ，thumbnailUrl为图片访问地址 ，productName为图片名称
for (const item of this.selectedItem) {
const promise = that.getFile(item.thumbnailUrl).then((data) => {
// 下载文件, 并存成ArrayBuffer对象
zip.file(item.productName + '.png', data, { binary: true }) // 逐个添加文件，需要加后缀".png"
cache[item.productName] = data
})
promises.push(promise)
}
let zipname = ''
zipname = this.dateFormatter('yyyy-MM-dd HH:mm:ss', new Date())
Promise.all(promises).then(() => {
zip.generateAsync({ type: 'blob' }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, zipname) // 利用file-saver保存文件 自定义文件名
that.$message({ type: 'success', message: '导出成功!' })
})
})
.catch((res) => {
that.$message.error('导出失败')
})
}，
getFile(url) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
responseType: 'blob',
})
.then((response) => {
resolve(response.data)
})
.catch((error) => {
reject(error.toString())
})
})
},
