vue 文件下载方法封装

1、安装 file-saver 插件

npm install  file-saver

2、封装下载方法

//识别是否是blob 文件方法
import { saveAs } from 'file-saver'

 function blobValidate(data) {
  return data.type !== 'application/json'
}
//调用get 方法 下载文件
export function downloadGet(url, params, filename, config) {
  downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
  return  axios({
          url: import.meta.env.VITE_APP_BASE_API+url, // 替换为你的API端点
          method: 'GET',
    responseType: 'blob',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded','Authorization':'Bearer ' + getToken() },// 确保响应类型是blob,并添加鉴权
        }).then(async (response) => {
 let filename = 'default_filename.xlsx'; // 默认文件名
        const contentDisposition = response.headers['content-disposition']; //获取响应头
        if (contentDisposition) {
        //获取文件名
          const matches = contentDisposition.match(/filename=([^;]+)/);
          if (matches && matches[1]) {
            filename = decodeURIComponent(matches[1].replace(/"/g, ""));
          }
        }
 const isBlob = blobValidate(response.data);
    if (isBlob) {
      const blob = new Blob([response.data])
      saveAs(blob, filename)  //保存下载文件
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    ElMessage.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}