vue实现excel导出

spring boot excel操作

https://blog.youkuaiyun.com/L_ss01/article/details/126040503?spm=1001.2014.3001.5502

axios.js

import axios from 'axios'
import store from '@/store'
const addErrorLog = errorInfo => {
  const { statusText, status, request: { responseURL }} = errorInfo
  const info = {
    type: 'ajax',
    code: status,
    mes: statusText,
    url: responseURL
  }
  if (!responseURL.includes('save_error_logger')) store.dispatch('addErrorLog', info)
}

class HttpRequest {
  constructor(baseUrl = config.baseURL) {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
    return config
  }
  destroy(url) {
    delete this.queue[url]
    if (!Object.keys(this.queue).length) {
      // Spin.hide()
    }
  }
  interceptors(instance, url) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      // 添加全局的loading...
      if (!Object.keys(this.queue).length) {
        // Spin.show() // 不建议开启，因为界面不友好
      }
      this.queue[url] = true
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
      this.destroy(url)
      const { data, status } = res
      return { data, status }
    }, error => {
      this.destroy(url)
      let errorInfo = error.response
      if (!errorInfo) {
        const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error))
        errorInfo = {
          statusText,
          status,
          request: { responseURL: config.url }
        }
      }
      addErrorLog(errorInfo)
      return Promise.reject(error)
    })
  }
  request(options) {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest

api.request.js

import HttpRequest from '@/libs/axios'
import config from '@/config/config'

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.prod

const axios = new HttpRequest(baseUrl)
export default axios

api

import request from '@/utils/request'
import axios from "@/libs/api.request";
export const apiExpoFactoryOrderExcel = (pageNo, customerName, customerPhone, factoryName) => {
  return axios.request({
    url: '/expoFactoryOrder/apiExpoFactoryOrderExcel',
    params: {
      pageNo, customerName, customerPhone, factoryName
    },
    method: 'post',
    responseType: 'blob'
  })
}

utils

export function exportExcelUtil(data, fileName) {
  const link = document.createElement('a')
  //与后台setContentType一致
  const blob = new Blob([data], {type: 'application/vnd.ms-excel'})
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)
  link.setAttribute('download', fileName + `.xls`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

view

downloadExcel() {
  apiExpoFactoryOrderExcel(this.pageNo, this.customerName, this.customerPhone, this.factoryName).then(res => {
    exportExcelUtil(res.data, "展会工厂订单");
    this.$message.success("导出成功")
  })
},