axios导出文件

index.vue
调用导出接口

    this.$fileApi.get(this, '/shop/order', this.pageInfo).then(res => {
      saveBlobAsFile(res)
    })


    export const saveBlobAsFile = function(res, fileName) {
      let headers = res.headers
      let contentDisposition = headers['content-disposition'].replace(/["|']/g, '')
      let matched = /filename=(.*)/g.exec(contentDisposition)
      let filename = fileName || decodeURI(matched[1])
      let blob = res.data
      let reader = new FileReader()
      reader.readAsDataURL(blob)
      reader.onload = (e) => {
       //创建a标签，插入到文档中并click，最后移除
        let a = document.createElement('a')
        a.download = filename
        a.href = e.target.result
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }

Axios方法一：

新建一个 fileRequest.js
需要将responseType设置为blob

    import axios from 'axios'
    const fileService = axios.create({
      baseURL: process.env.BASE_API,
      responseType: 'blob'
    })

拦截器设置：

    fileService.interceptors.request.use(config => {
      config.headers['X-Page-Url'] = location.href
      return config
    }, error => {
      Promise.reject(error)
    })
    // 返回res设置
    fileService.interceptors.response.use(res => {
      if (res.data.type === 'application/json') {
        return new Promise((resolve, reject) => {
          let err = {}
          let reader = new FileReader()
          reader.readAsText(res.data)
          reader.onload = (e) => {
            err = JSON.parse(e.target.result)
            return reject(err)
          }
        })
      } else {
        return res
      }
    }, error => {
      return Promise.reject(error)
    })

export.js
封装请求方式：

    import request from '@/utils/fileRequest'
    function apiAxios(method, url, params) {
      return request({
        method: method,
        url: url,
        data: method === 'POST' || method === 'PUT' || method === 'DELETE' ? params : null,
        params: method === 'GET' ? params : null
        headers: headers,
        // withCredentials: false
      })
    }
    export default {
      get: function(vue, path, params) {
        return apiAxios('GET', path, params)
      },
      post: function(vue, path, params) {
        return apiAxios('POST', path, params)
      },
      put: function(vue, path, params) {
        return apiAxios('PUT', path, params)
      },
      delete: function(vue, path, params) {
        return apiAxios('DELETE', path, params)
      }
    }

Axios方法二：

在请求接口时加入 responseType: ‘blob’,

export function exportOperatorReport(data) {
  return request({
    url: '/financial/operator/exportOperatorReport',
    method: 'post',
    responseType: 'blob',
    data
  })
}

在response加入以下代码

    fileService.interceptors.response.use(res => {
      if (response.data instanceof Blob) {
        return Promise.resolve(response)
      }
    }