接口： PMPDownloadZip: params => axios.post('pmpGenerateCertificate/downloadZip', params, {responseType: 'blob'}), // 批量导出证书
// 下载方法
async downloadFn({ id, name, certificateNumber }) {
const loading = this.$loading({
lock: true,
text: "加载中...",
background: "rgba(0, 0, 0, 0.2)"
});
const { data: res } = await api.downloadCertificate({ id });
loading.close();
const blob = new Blob([res], { type: "image/png" });
const url = window.URL.createObjectURL(blob);
const img = document.createElement("img");
// 设置属性
img.src = url;
img.alt = url;
img.setAttribute("crossOrigin", "anonymous");
// 添加到页面中
document.body.appendChild(img);
img.onload = function() {
// 将图像绘制到画布上
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext("2d");
if (context) {
context.drawImage(img, 0, 0, img.width, img.height);
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name + "-" + certificateNumber || "img.jpg"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
document.body.removeChild(img);
}
};
},
导出excel或者zip方法
const loading = this.$loading({
lock: true,
text: "加载中...",
background: "rgba(0, 0, 0, 0.2)"
});
const idList = this.multipleSelection.map(item => item.id);
const res = await api.PMPDownloadZip({ idList });
loading.close();
// 导出zip
this.exportData(res, "application/zip");
// 导出excel
// this.exportData(res, "application/vnd.ms-excel");
// link.setAttribute('download', '课堂学生学习数据导出' + '.xlsx')
async exportData(res, type) {
const link = document.createElement("a");
let blob = new Blob([res.data], { type });
link.style.display = "none";
link.download = "PMP生成证书.zip";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},