应用场景:
需要批量下载图片,下载压缩包
解决方案:
将图片数据处理成arraybuffer类型或bold类型,使用jszip下载
代码:
// 接口处理
// 获取二维码详情 Base64方式 -> arraybuffer
export function getImg({ id: id }) {
return request({
url: '/sys/qrcode/getImg',
method: 'get',
responseType: 'arraybuffer',
params: {
id
}
});
}
// request.js
// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data;
// TODO
if (response.config.responseType === 'arraybuffer') {
return res;
}
if (res.code === '1') {
return res;
} else {
console.error(`错误码:${res.code},错误信息:${res.data},报错接口:${response.request.responseURL.split('//')[1]}`);
return Promise.reject(res);
}
},
error => {
console.log(error.response);
}
}
import JSZip from 'jszip';
import FileSaver from 'file-saver';
// 批量下载
batchDownload() {
const zip = new JSZip();
const promises = [];
// 获取压缩处理的图片列表
this.batchData.forEach(row => {
const promise = codeApi.getImg({ id: row.id }).then(data => {
const file_name = row.name + '.png'; // 获取文件名
zip.file(file_name, data, { binary: true }); // 逐个添加文件
});
promises.push(promise);
});
// 下载
Promise.all(promises).then(() => {
zip.generateAsync({ type: 'blob' }).then(content => {
console.log(content);
// 生成二进制流
const time = momentUtil.YYYYMMDD();
FileSaver.saveAs(content, `批量下载-${time}.zip`); // 利用file-saver保存文件 自定义文件名
});
});
},
// 单个下载
exportQrCode(row) {
const time = momentUtil.YYYYMMDD();
codeApi.getImg({ id: row.id }).then(res => {
FileSaver.saveAs(new Blob([res]), `${row.name + '-' + time}.png`);
});
}