用到的组件：file-saver、jszip。使用npm install一下
如果使用element-ui的话，已经整合了file-saver，只安装jszip就可以
VUE页面：
<script>
import JSZip from 'jszip'
import FileSaver from 'file-saver'
...
methods: {
// 下载zip包
getImageZip(row) {
// zip包的文件名称
let name = '项目《' + row.projectName + '》图片信息.zip'
// 下面的Loading组件是element-ui带的，可以不用
let downloadLoadingInstance = Loading.service({
text: "正在下载，请稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
})
// 获取图片链接地址
getProjectImage(row.bizId).then(response => {
const zip = new JSZip()
const promises = []
const urls = []
// 这里的item就是不同的url，每个url对应一张图
response.data.images.forEach(item => {
let fileName = item.substr(item.lastIndexOf('/') + 1, item.lastIndexOf('.'))
const promise = getUrlFile(item).then(data => { // 根据url下载单个图片, 并存成ArrayBuffer对象
zip.file(fileName, data, { binary: true }) // 逐个添加文件
})
promises.push(promise)
urls.push(item)
})
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then(content => { // 生成二进制流
FileSaver.saveAs(content, name) // 利用file-saver保存文件
})
removeTempFile(urls)
downloadLoadingInstance.close()
})
}).catcht(e => {
downloadLoadingInstance.close()
})
}
}
</script>JS文件：
// request是element-ui对axios的二次封装，用于发送简单请求
import request from "@/utils/request";
// axios为发送请求的框架
import axios from "axios";
// 获取项目下的所有图片（返回的是所有图片的url，可以直接放到浏览器里访问到图片）
export function getProjectImage(id) {
return request({
url: "/api/project/getProjectImage/" + id,
method: "get",
});
}
// 获取url文件对象
export function getUrlFile(url) {
return new Promise((resolve, reject) => {
// 封装带baseURL的axios实例，baseUrl为后台地址
const temp = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
responseType: "arraybuffer",
});
// 发送请求获取资源
temp
.get(url)
.then((data) => {
resolve(data.data);
})
.catch((error) => {
reject(error.toString());
});
});
}
