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

 

上一篇:ROS学习记录第二天


下一篇:ROS从入门到放弃第三篇(创建工作空间和功能包)