vue管理后台项目导出Excel表格，前端处理后台返回的二进制文件流

1 调用后端的接口时，加入请求的类型responseType为‘blob’（后端请求的参数默认为空对象）

export function exportList(obj={}) { // 导出表格
  return request({
    url: '/mall/orderinfo/export',
    method: 'post',
    data: obj,
    responseType:'blob' // 返回文件的类型
  })
}

2 页面的导出按钮

  <el-button type="primary"
                    icon="el-icon-download"
                    size="small"
                    @click.stop="exportData()">导出</el-button>

3

（1）在导出表格的页面导入请求的方法和处理表格是创建的a便签以及导出表格的名称为当前时间的处理方法

  import {exportList} from '@/api/mall/orderinfo'

   
import {isExcel,dateFormats} from '@/util/util.js'

（2）util.js文件

// 解析导出的二进制文件流
export const isExcel=(type,name, data)=> {
  const link = document.createElement('a')
  const blob = new Blob([data])
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)
  link.setAttribute('download', `${name}.`+type)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
// 处理时间戳为年月日时分秒
export const dateFormats = (val) => {
  let date = new Date(val)
  let year = date.getFullYear()
  let month = date.getMonth()+1
  let day = date.getDate()
  let hour = date.getHours()
  let m = date.getMinutes()
  let s = date.getSeconds()
  month = month < 10 ? '0'+month : month
  day = day < 10 ? '0'+day : day
  hour = hour < 10 ? '0'+hour : hour
  m = m < 10 ? '0'+m : m
  s = s < 10 ? '0'+s : s
  
  return year+'-'+month+'-'+day+' '+ hour+':'+m+':'+s
}

4 在导出表格的页面使用按钮绑定的导出方法， isExcel传入是三个个参数 ，isExcel（‘文件类型’，‘导出的文件名’，‘后端接口返回的二进制流的文件’）

// 导出excel表格 （this.paramsSearch 是传入的参数，按照搜索的条件导出。不传参数，则是全部导出） 

            exportData(){

                exportList(this.paramsSearch).then(res =>{

                    isExcel('xlsx', dateFormats(Date.now()), res.data);

                })

            },