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

2022-01-26 01:02:34 阅读：195 来源： 互联网

标签：vue Excel 导出 month date let 后台 link day

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>

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

标签：vue,Excel,导出,month,date,let,后台,link,day
来源： https://www.cnblogs.com/doudou-song/p/15845184.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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