任意格式文件下载（文件流的形式）

方法一（原生xhr对象实现，下载监听进度需要单独封装）：

export function downloadFile(path, sourceName, sourceType) {
  const request = new XMLHttpRequest(),
    fileUrl = path,
    fileName = sourceName + '.' + sourceType;

  request.open("GET", fileUrl, true);
  request.responseType = 'blob';

  return new Promise((resolve, reject) => {
    request.onload = function () {
      const tempUrl = window.URL.createObjectURL(request.response)
      debugger
        let href = document.createElement('a');
      href.href = tempUrl;
      href.download = fileName;
      href.click()
      href.remove()
      resolve()
    }
    request.onerror = function () {
      reject()
    }
    request.send();
  })
}

方法二(可通过可通过axios配置对象统一配置xhr中的onDownloadProgress函数监听下载进度)：

// 通用下载方法
export function download(url,row){
    service({
        method: 'get',
        url,
        responseType: 'blob',  
    }).then(res => {
        debugger
        // const { data } = res
        const blob = new Blob([res])
        // 传入的文件名称，在点击下载时传入所在行数据对象row
        let fileName = row.fileName+'.'+row.extName
        if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName)
        }
    }).catch((error) => {
            console.log(error)
    }) 
}

axios监听实现：

在默认配置处
const service = axios.create({
 baseURL:process.env.VUE_APP_BASE_API,
 onUploadProgress: (progress) => {
    // 格式化成百分数
    let progressresUpload
    progressresUpload = Math.floor(progress.loaded / progress.total * 100) + '%'
    console.log(progressresUpload);
  },
  onDownloadProgress: (progress) => {
    let progressresDownload
    let total=progress.target.response&&progress.target.response.size||0
   

     progressresDownload = 100 * ((progress).loaded / total)+ '%'
     console.log(progressresDownload);
  }

}）



在响应拦截器中
service.interceptors.response.use(res => {

    const {
      config,
      request,
      headers,
      data,
      status
    } = res
   
    if (typeof config.onUploadProgress === 'function' && config.onUploadProgress) {
      request.upload.addEventListener('progress', config.onUploadProgress)
    } //监听文件上传
    if (typeof config.onDownloadProgress === 'function' && config.onDownloadProgress) {
      request.addEventListener('progress', config.onDownloadProgress)
    } //监听文件下载


    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    // 二进制数据则直接返回
    if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
      return res.data
    }
   
   ...
)

原生实现监听上传（参考I-T枭大佬的文章）
XMLHttpRequest上传文件实现进度条(-onprogress- )