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