vue中下载文件（vue文件下载到指定路径）

下载文件。
首先需要再拦截响应器配置里面，把下载接口的路由添加进去，不能和普通的接口一起，否则会被拦截掉。

service.interceptors.response.use(
  response => {
    const ROUTER_API = [
      '/hkgo-admin/api/admin/platform/user/exportUserAccount', // 添加下载的接口地址
    ]

    if (ROUTER_API.includes(response.config.url)) {
      return response // 正常返回结果
    }
  // 下面的可根据业务逻辑适当调整
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code === 401) {
      // to re-login
      // Message.error('无效的会话，或者登录已过期，请重新登录。');
      store.dispatch('user/resetToken').then(() => {
        Message({
          message: '无效的会话，或者登录已过期，请重新登录!',
          type: 'warning',
          duration: 1000
        })
        // router.push({path: '/login'})
        setTimeout(() => {
          router.replace({
            path: '/login',
            query: {
              redirect: decodeURIComponent(store.getters.redirect_path) || '' // router.currentRoute.fullPath
            }
          })
          // location.reload()
        }, 1000)
      })
      window.localStorage.clear()
      // location.href = '/login';
    } else if (res.code === 403) {
      console.log('ROUTER_API', response.config.url)
      Message.error('没有权限访问。')
    }
    if (res.code !== 200 && res.code !== 401) {
      if (isPhone()) { // 移动端
        return Promise.reject(res || 'Error')
      }
      Message({
        message: res.message || 'Error',
        type: 'warning',
        duration: 5 * 1000
      })

      if (response.config.url.includes('/admin/platform/coupon/importSendCouponToUser')) {
        return Promise.reject(res.data)
      }

      return Promise.reject()
    } else {
      return res.data
    }
  },
  error => {
    // Message({
    //   message: error.message,
    //   type: 'warning',
    //   duration: 5 * 1000
    // })
    return Promise.reject(error)
  }
)

api接口定义：
// 下载接口
export function exportUserAccountApi(params) {
  return request({
    url: `/hkgo-admin/api/admin/platform/user/exportUserAccount`,
    method: 'get',
    responseType: 'blob' // 必须是blob类型
  })
}

模板下载按钮：
<el-button @click="downloadTemplateClick"  type="primary">下载模板</el-button>

下载点击事件监听：
downloadTemplateClick () {
  			// 下载接口地址
        exportUserAccountApi().then(res => {
          this.downloadFile(res)
        }).catch(e => {
          console.log(e)
        })
      },
      // 下载模板事件--写法可固定参考此写法即可，也可以根据需要做调整。
      downloadFile(res) {
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // res为从后台返回的数据
        var fileName =
            res.headers['content-disposition'].split('filename=').pop() || ''

        if ('msSaveOrOpenBlob' in navigator) {
          window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
          const elink = document.createElement('a')
          elink.download = decodeURI(fileName)
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        }
      }

很多前端同学在与后端做文件下载对接联调的时候，总会遇到一些坑，或者遇到一些乱码，文件不能正常下载显示等等，其实都是一些请求格式配置、或者方法兼容问题导致。浪费了你不少的时间。下面的示例，仅仅作为一个demo参考，如果能给你参考或者减少你的对接联调时间，那就有所收藏帮助。