|
|
1、安装jszip、file-saver
npm i file-saver
npm i jszip
2、封装common.js import JSZip from 'jszip'
import FileSaver from "file-saver";
import {
Message
} from 'element-ui'
export function filesToRar(arrImages, filename) {
let _this = this;
let zip = new JSZip();
let cache = {};
let promises = [];
let title = '正在加载压缩文件';
for (let item of arrImages) {
const promise = getImgArrayBuffer(item.fileUrl).then(data => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.renameFileName, data, {
binary: true
}); // 逐个添加文件
cache[item.renameFileName] = data;
});
promises.push(promise);
}
Promise.all(promises).then(() => {
zip.generateAsync({
type: "blob"
}).then(content => {
title = '正在压缩';
// 生成二进制流
FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名
title = '压缩完成';
});
}).catch(res => {
// _this.$message.error('文件压缩失败');
Message({
type: 'error',
message: '文件压缩失败'
})
});
}
//获取文件blob
export function getImgArrayBuffer(url) {
let _this = this;
return new Promise((resolve, reject) => {
//通过请求获取文件blob格式
let 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();
});
}
|
3、页面引入并引用
import {
filesToRar,
getImgArrayBuffer
} from '@/utils/commonMethods'
// 批量导出头像
batchAvatar() {
if (this.multipleSelection && this.multipleSelection.length !== 0) {
// 导出所选择用户头像
let obj = this.throughData(this.multipleSelection)
// console.log(img)
filesToRar(obj, '批量压缩头像文件')
}
}
},
throughData(arr) {
let img = []
arr.map(val => {
if (val.headImg !== '') {
let temp = {
renameFileName: val.number + '_' +
val.name + '.jpg',
fileUrl: 'http://supereye.huitianxx.com/' + val.headImg
}
img.push(temp)
}
})
return img
} |
----------------------------
原文链接:https://www.jianshu.com/p/255c796d59af
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 flybird 在 2021-06-12 16:55:05 重新编辑]
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → vue+file-saver+jszip实现批量导出图片
消息
查看
搜索
好友
复制
引用
IP: 已设置保密
