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);

                })

            },