前段时间pc端的一个需求,需要将图片打包下载到本地,于是就开始网上各种搜,折腾了几天,看了各种版本,最终自己整合后,终于实现功能。
由于需求是需要打包下载,安装打包文件的插件即可,项目是基于vue的,所以需要以下两个插件支持
1、安装插件
npm install jszip --save
npm install flie-saver --save
2、在需要用的vue文件里引入
import JSZip from 'jszip'
import FileSaver from 'file-saver'
废话不多说,上代码
<template>
<el-button type="primary" @click="download">打包图片</el-button>
</template>
<script>
// 打包图片需要的插件
import JSZip from 'jszip'
import FileSaver from 'file-saver'
export default {
data () {
return {
imgSrcList: [] // 图片合集
}
},
methods:{
// 下载
download () {
console.log(this.imgSrcList, '图片合集')
const arr = this.imgSrcList.map((item, index) => {
return {
fileUrl: item,
renamefileName: 'img' + (index * 1 + 1) + '.jpg'
}
})
this.unpack(arr, '图片打包.zip')
},
unpack (arr, fileName) {
const _this = this
const zip = new JSZip()
const cache = {}
const list = []
arr.forEach((item) => {
const promise = _this.getImgArrayBuffer(item.fileUrl).then(data => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.renamefileName, data, { binary: true }) // 逐个添加文件
cache[item.renamefileName] = data
})
list.push(promise)
})
Promise.all(list).then(() => {
zip.generateAsync({ type: 'blob' }).then(content => {
// 生成二进制流
FileSaver.saveAs(content, fileName) // 利用file-saver保存文件 自定义文件名
_this.$message.success('压缩完成')
}).catch(res => {
_this.$message.error('文件压缩失败')
})
})
},
getImgArrayBuffer (url) {
return new Promise((resolve, reject) => {
const xmlhttp = new XMLHttpRequest()
xmlhttp.open('GET', url, true)
xmlhttp.responseType = 'blob'
xmlhttp.onload = function () {
if (this.status === 200) {
resolve(this.response)
} else {
reject(this.status)
}
}
xmlhttp.send()
})
},
}
}
</script>
功夫不负有心人呐!终于成功!
希望转载的话可以挂上链接🔗哈~ ,毕竟努力了几天的成果孩儿也不容易