行业知识
vue项目从后端下载文件显示进度条或者loading
2026-11-03 07:28:57
来源:互联网转载
//API接口export const exportDownload = (params?: Object, peCallback?: Function) => { return new Promise((resolve, reject) => { axios({ method: 'get', url: '', headers: { 'access_token': `${getToken()}`, }, responseType: 'blob', params, onDownloadProgress: (pe) => { peCallback ? peCallback(pe) : ''; }, }) .then((res) => { resolve(res); }) .catch((err) => { console.warn(err); }); });}; function peCallback(pe) { // 下载回调//百分比计算 defaultPercent.value = Math.round((pe.event.loaded / pe.event.total) * 100); if (pe.event.loaded === pe.event.total) { showProgress.value = false; message.success({ content: '下载完成', key, duration: 3 }); } } try { exportDownload(params peCallback).then((res) => { // 接口3 const fileName = 'xxx.xlsx'; let bold = new Blob([res.data]); const newUrl = window.URL.createObjectURL(bold); const link = document.createElement('a'); link.href = newUrl; link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); link.parentNode?.removeChild(link); }); } catch (error) { message.warn('下载失败,请重试'); }
上一篇:项目-论坛系统
下一篇:【SpringBoot】数据脱敏