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表格(前端传入指定参数即可返回指定数据)此方法较为灵活。

相关文章
|
6月前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
2月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
1月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
34 0
|
6月前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
47 0
|
3月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
Vue3表格(Table)
|
4月前
|
存储 开发框架 前端开发
在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
|
3月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
67 0
|
4月前
|
小程序 PHP
全新UI自助图文打印系统小程序源码 PHP后端 附教程
全新UI自助图文打印系统小程序源码 PHP后端 附教程
274 2
|
4月前
|
JavaScript
vue 复杂表格的遍历渲染
vue 复杂表格的遍历渲染
49 2
|
4月前
|
JavaScript
vue拖拽 —— vuedraggable 表格拖拽行
vue拖拽 —— vuedraggable 表格拖拽行
308 1