VUE之Elenent-ui之table表格导出、调用后端接口导出(后端返回流文件导出)

简介: VUE之Elenent-ui之table表格导出、调用后端接口导出(后端返回流文件导出)

调用后端接口导出excel、后端返回流文件导出excel

步骤:

export function download(params) {
  return request({
    url: '/api/xxxx/download',
    method: 'get',
    params,
    responseType: 'blob'  //1.首先设置responseType对象格式为 blob
  })
}```
//请求接口这里注意
 // 导出
    doExport() { //导出事件
      this.params.intervalFlag = this.value
      download(this.params).then(res => { // 1.首先设置responseType对象格式为 blob
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 2.获取请求返回的response对象中的blob 设置文件类型,这里以excel为例
        const url = window.URL.createObjectURL(blob) // 3.创建一个临时的url指向blob对象
        const a = document.createElement('a') // 4.创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
        a.href = url
        a.download = 'xxx.xlsx'
        a.click()
        window.URL.revokeObjectURL(url) // 5.释放这个临时的对象url
      })
    },

总结:后端返回流文件格式数据前端简单处理后即可得到excel表格(前端传入指定参数即可返回指定数据)此方法较为灵活。

相关文章
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
335 5
|
存储 前端开发 Java
Java后端如何进行文件上传和下载 —— 本地版(文末配绝对能用的源码,超详细,超好用,一看就懂,博主在线解答) 文件如何预览和下载?(超简单教程)
本文详细介绍了在Java后端进行文件上传和下载的实现方法,包括文件上传保存到本地的完整流程、文件下载的代码实现,以及如何处理文件预览、下载大小限制和运行失败的问题,并提供了完整的代码示例。
5508 2
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
219 0
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
2913 0
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
318 1
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
471 1
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
1653 0
Element UI & Element Plus之改变表格单元格颜色
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
538 0

热门文章

最新文章