vue中实现下载xlsx格式的excel

// 这是axios文件
const VueAxios = {
    vm: {},
    // eslint-disable-next-line no-unused-vars
    install(Vue, router = {}, instance) {
        if (this.installed) {
            return;
        }
        this.installed = true;

        if (!instance) {
            // eslint-disable-next-line no-console
            console.error('You have to install axios');
            return;
        }

        Vue.axios = instance;

        Object.defineProperties(Vue.prototype, {
            axios: {
                get: function get() {
                    return instance;
                }
            },
            $http: {
                get: function get() {
                    return instance;
                }
            }
        });
    }
};

export {
    VueAxios,
    // eslint-disable-next-line no-undef
    //instance as axios
}

// 封装一个axios请求方式
import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import { VueAxios } from './axios'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import {Modal} from 'ant-design-vue'

let apiBaseUrl = window._CONFIG['domianURL']

// 创建 axios 实例
const service = axios.create({
  baseURL: apiBaseUrl
  // timeout: 9000 // 请求超时时间
})

// 请求头，参数设置
service.interceptors.request.use(config => {
  const token = Vue.ls.get(ACCESS_TOKEN)
  if (token) {
    config.headers['X-Access-Token'] = token
  }
  if (config.method === 'get') {
    if (config.url.indexOf('sys/dict/getDictItems') < 0) {
      config.params = {
        _t: Date.parse(new Date()) / 1000,
        ...config.params
      }
    }
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// 接收器，拦截code === 500，踢出并重定向
service.interceptors.response.use(res => {
  let data = res.data
  if (data.code === 520) {
    loginOut()
  }
  return res.data
}, (err) => {
  if (err.response) {
    let data = err.response.data
    if (data.code === 500 || data.status === 500) {
      loginOut()
    }
  }
})
function loginOut () {
  store.dispatch('Logout').then(() => {
  })
}

const installer = {
  vm: {},
  install (Vue, router = {}) {
    Vue.use(VueAxios, router, service)
  }
}
export {
  installer as VueAxios,
  service as axios
}

// 在utils文件中封装一个方法  然后导出
import Vue from 'vue'
import { axios } from '@/utils/request'

export function downFile(url,parameter){
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'blob'
  })
}

handleExportXls (fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = { ...this.queryParam }
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(',')
      }
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },