axios 下载文件流，请求时携带token,并工程化配置

还不了解axios的同窗能够前往这里，axios的使用说明

下面看一下下载文件流注意事项：

一、首先确保后端的是输出流格式

二、axios的服务器响应的数据类型为responseType:blob

三、返回的数据流占用response.data字段

示例：

axios({
        method:'post',//请求方式
        url:'请求地址',
        data:{id:1},//请求参数
        responseType:'blob'//服务器返回的数据类型
    }).then(response=>{
        const content = response.data //返回的内容
        const fileName = '文件.xls'//下载文件名
        download(content,fileName)
    })
    //处理下载流
    function download(content,fileName){
        const blob = new Blob([content]) //建立一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
        const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
        let dom = document.createElement('a')//设置一个隐藏的a标签，href为输出流，设置download
        dom.style.display = 'none'
        dom.href = url
        dom.setAttribute('download',fileName)//指示浏览器下载url,而不是导航到它；所以将提示用户将其保存为本地文件
        document.body.appendChild(dom)
        dom.click()
    }
复制代码

工程化下对axios的配置以下

requestDownload.js

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'

// create an axios instance
const service = axios.create({
  baseURL: '请求地址', // process.env.VUE_APP_BASE_API; url = base url + request url;
  withCredentials: true,//表示跨域请求时是否须要使用凭证
  responseType: 'blob' //接收返回的类型
})
/** * HTTP方法 */

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token --['X-Token'] as a custom key.
      // please modify it according to the actual situation.
      config.headers['token'] = store.getters.token
    }
    return config
  },
  error => {
    // do something with request error
    Message({
      message: '文件不存在',
      type: 'error',
      duration: 5 * 1000
    }) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /** * If you want to get information such as headers or status * Please return response => response */

  /** * Determine the request status by custom code * Here is just an example * You can also judge the status by HTTP Status Code. */
  response => {
    if (!response.data) {
      return Promise.reject('文件不存在')
    } else {
      return response.data
    }
  },
  error => {
    // console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

复制代码

requestDownload.js这种设置存在一个问题：全部的返回都是以blob方式返回的，若出现token超时的状况，将没法校验；

改进方法以下：

一、request.js

....request配置....

// response interceptor
service.interceptors.response.use(
 response => {
   const res = response.data
   if (response.config.responseType === 'blob') {
     return res
   }
   //假设res.code=0时，返回结果为succuss ， res.code = 9008为token超时
   if (res.code === 9008  ) {
       Message({
         message: '登陆超时，请从新登陆',
         type: 'error',
         duration: 5 * 1000
       })
     return Promise.reject(error.message)
   } else {
     return res
   }
 },
 error => {
   // console.log('err' + error) // for debug
   Message({
     message: error.message,
     type: 'error',
     duration: 5 * 1000
   })
   return Promise.reject(error)
 }
)

export default service
复制代码

二、后端增长校验token超时的方法

三、请求接口文件：requestDownload.js 封装请求方法

import request from '@/utils/request'

async function requestDownload({ url, method, data }) {
 await request({
   url: '校验超时连接',
   method: 'post'
 })
 return request({
   url,
   method,
   data,
   responseType: 'blob'//必填项
 })
}
export default requestDownload
复制代码

公共方法文件/util/index.js中增长，处理流的方法

//处理下载流
    export function download(content,fileName){
        const blob = new Blob([content]) //建立一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
        const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
        let dom = document.createElement('a')//设置一个隐藏的a标签，href为输出流，设置download
        dom.style.display = 'none'
        dom.href = url
        dom.setAttribute('download',fileName)//指示浏览器下载url,而不是导航到它；所以将提示用户将其保存为本地文件
        document.body.appendChild(dom)
        dom.click()
    }
复制代码

接口示例 proAdd.js中增长下载接口

import requestDownload from '@/utils/requestDownload'
export function exportFile(data) {
  return requestDownload({
    url: '/excel/excelDownLoad',
    method: 'post',
    data:data
  })
}
复制代码

使用示例 exportExcelBtn.vue中添加调用方法

import { exportFile } from '@/api/**.js'
import { download } from '@/utils/index.js'
 exportFile({ id : 1 }).then(result => {
        download(result, '模板文件.xlsx')
      })
复制代码

文件结构图