小工具知识网

当前位置: 首页 > 行业知识 > vue项目从后端下载文件显示进度条或者loading

行业知识

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】数据脱敏