vue 前端下载模板信息

后端返回文件流  前端进行下载

记得请求接口一定要加一个  responseType: 'blob'

export function ImportTemplateDownload() {
  return request({
    url: '/export/download/template',
    method: 'get',
    responseType: 'blob'
  })
}

         console.log('返回要下载的文件', res)
        try {
          let url = window.URL.createObjectURL(new Blob([res], { type: '.xlsx' }))
          let a = document.createElement('a')
          a.style.display = 'none'
          a.href = url
          a.setAttribute('download', `用户导入模板.xlsx`)
          document.body.appendChild(a)
          a.click()
          url = window.URL.revokeObjectURL(url)
          document.body.removeChild(a)
        } catch (e) {
          console.log('下载的文件出错', e)
        }
      })

后续补充兼容性

//模板文件为后端生成，前端得到response数据 
export function downRes2Blob(response) {
  let str = response.headers['content-disposition'].match(/filename\*=UTF-8''(.*)/)[1]
  const fileName = str.replace('.xlsx', `_${dayjs(Date.now()).format('YYYYMMDDHHmmss')}.xlsx`)
  // 将二进制流转为blob
  const blob = new Blob([response.data], { type: 'application/octet-stream' })
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
    window.navigator.msSaveBlob(blob, decodeURI(fileName))
  } else {
    // 创建新的URL并指向File对象或者Blob对象的地址
    const blobURL = window.URL.createObjectURL(blob)
    // 创建a标签，用于跳转至下载链接
    const tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    tempLink.setAttribute('download', decodeURI(fileName))
    // 兼容：某些浏览器不支持HTML5的download属性
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    // 挂载a标签
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    // 释放URL地址
    window.URL.revokeObjectURL(blobURL)
  }
}