选择相应的图片批量导出或直接批量导出并压缩在一个文件夹里
思路分析
1.先将选中二维码的地址存在一个数组中
2.依次请求图片并将其下载
3.后用jszip压缩文件
4.最后用file-saver生成文件
实现代码：
import JSZip from "jszip";
import FileSaver from "file-saver";
import axios from "axios";
getFile = (url) => {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
};
// 批量下载
handleBatchDownload = async(selectImgList) => {
const data = selectImgList;
const zip = new JSZip()
const cache = {}
const promises = []
await data.forEach(item => {
const promise = this.getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
const arr_name = item.split("/");
let file_name = arr_name[arr_name.length - 1] // 获取文件名
if (file_name.indexOf('.png') == -1) {
file_name = file_name + '.png'
}
zip.file(file_name, data, {
binary: true
}) // 逐个添加文件
cache[file_name] = data
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({
type: "blob"
}).then(content => { // 生成二进制流
FileSaver.saveAs(content, "photo.zip") // 利用file-saver保存文件
})
})
};
上述输入selectImgList是选择批量导入的图片链接数组。
https://www.npmjs.com/package/file-saver
https://www.npmjs.com/package/jszip
