vue+element ui實現導出Excel文件

首先，一定一定要設置請求頭：responseType: 'blob',

一開始試了一下直接調用的，就是像平常調用接口那樣，發現返回來一堆亂碼，所以，

const link = document.createElement('a')
link.download = fileName
link.href = objectUrl
link.click()
也是關鍵

其他位置像正常連接口那樣寫就可以了，我是這樣寫的，封裝好的接口：

 <el-button type="primary" class="refresh" @click="onCheckedOut">導出</el-button>
import {exportData} from 'config/index'
 onCheckedOut () { // 導出
 　　exportData({
　　　　　url: '/admin/user/info/export'
 　　}).then(res => {
 　　　　if (res.status == 200) {
 　　　　　　let fileName = res.headers['content-disposition'].split('=')[1]
           let objectUrl = URL.createObjectURL(new Blob([res.data]))
           const link = document.createElement('a')
           link.download = fileName
           link.href = objectUrl
           link.click()
 　　　　} else {
        　　this.$message.error('出現異常請聯系管理員！')
 　　　　}
 　　}).catch(err => {
 　　　　this.$message.error('出現異常稍后再試！')
 　　})
}

config/index.js

export const exportData = ({ url, data }) => { // 導出文件使用
  return httpDowload({ url, data, method: 'post' })
}
export const httpDowload = httpParams => {
  let { url, data, method } = { url: '', data: {}, method: 'get', ...httpParams }
  try {
    let params = {}
    if (method === 'get') {
      params = data
      data = {}
    }
    return axios({
      baseUrl: httpParams.baseURL || '/admin',
      url,
      method,
      params,
      data,
      headers: setHeaders(),
      responseType: 'blob'
    }).then((zData) => handleResponse(zData))
  } catch (err) {
    console.log(err)
  }
}
function handleResponse (data) {
  if (data.status !== 200) {
    return Promise.reject(data)
  } else {
    return Promise.resolve(data)
  }
}
export function setHeaders () {
  const token = sessionStorage.getItem('token') === null ? '' : sessionStorage.getItem('token')
  return {
    TOKEN: token
  }
}