vue+axios导出文件(excel)

69 阅读 0 评论 46 点赞

我是靠谱客的博主稳重钢笔，最近开发中收集的这篇文章主要介绍vue+axios导出文件(excel)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.请求类型需要设置为: responseType:blob或者为arraybuffer,这个默认是json

export function exportExcel(params) {
  return request({
    url: process.env.ADMIN_API + '/api/admin/token/blog/export',
    method:'post',
    data:params,
    responseType: 'blob',
  });

2.对响应数据做处理,我这里直接在拦截器中处理了: 这样就只要是blob或者arraybuffer类型的就直接下载了

service.interceptors.response.use(
  //对响应数据做点什么
  response => {
     /**
      * code为非20000是抛错 可结合自己业务进行修改
      */
    const res = response.data;
    if (res.code === 200) {
      return response.data
    }
    //blob类型为文件下载对象，不论是什么请求方式，直接返回文件流数据
    if(response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer'){  //下载excel类型
       let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
      let downloadElement = document.createElement('a');
      let href = window.URL.createObjectURL(blob); //创建下载的链接
     downloadElement.href = href;

     //获取文件名
      let fileName = decodeURI(response.headers['content-disposition'].split("=")[1]);  //处理文件名乱码问题
     downloadElement.download = fileName; //下载后文件名
     document.body.appendChild(downloadElement);
     downloadElement.click(); //点击下载
     document.body.removeChild(downloadElement); //下载完成移除元素
     window.URL.revokeObjectURL(href); //释放掉blob对象
    return;
    }
}

完整的拦截器代码如下:

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: '', // api 的 base_url
  timeout: 10000, // 请求超时时间,
  headers: {
    'content-type': 'application/json;charset=utf-8'  //设置编码
  },
  withCredentials: false
})

service.defaults.headers.common['Authorization'] = getToken()

// request拦截器
service.interceptors.request.use(

  //TODO 先写死header的token

  // 在发送请求之前做些什么
  config => {
    /*if (getToken() != null && getToken() != '') {
       config.headers['token'] = getToken() // 让每个请求携带自定义token
      config.headers.Authorization = getToken()
    }*/
    config.headers['token'] = "REWFHHGJHKJJK" // 让每个请求携带自定义token
    config.headers.Authorization = "REWFHHGJHKJJK"
    return config
  },



  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  //对响应数据做点什么
  response => {
     /**
      * code为非20000是抛错 可结合自己业务进行修改
      */
    const res = response.data;
    if (res.code === 200) {
      return response.data
    }
    //blob类型为文件下载对象，不论是什么请求方式，直接返回文件流数据
    if(response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer'){  //下载excel类型
       let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
      let downloadElement = document.createElement('a');
      let href = window.URL.createObjectURL(blob); //创建下载的链接
     downloadElement.href = href;

     //获取文件名
      let fileName = decodeURI(response.headers['content-disposition'].split("=")[1]);  //处理文件名乱码问题
     downloadElement.download = fileName; //下载后文件名
     document.body.appendChild(downloadElement);
     downloadElement.click(); //点击下载
     document.body.removeChild(downloadElement); //下载完成移除元素
     window.URL.revokeObjectURL(href); //释放掉blob对象
    return;
    }

    else {
      /*MessageBox.confirm(
        '你已被登出，可以取消继续留在该页面，或者重新登录',
        '确定登出',
        {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.dispatch('FedLogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      })
      return Promise.reject('error')*/
      return response;
    }
  },
  error => {
    // 对响应错误做点什么
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service