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

相关文章
|
5月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
489 0
|
7月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
571 6
|
11月前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
625 3
|
12月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
283 5
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
956 6
Vue使用element中table组件实现单选一行
|
存储 前端开发 Java
Java后端如何进行文件上传和下载 —— 本地版(文末配绝对能用的源码,超详细,超好用,一看就懂,博主在线解答) 文件如何预览和下载?(超简单教程)
本文详细介绍了在Java后端进行文件上传和下载的实现方法,包括文件上传保存到本地的完整流程、文件下载的代码实现,以及如何处理文件预览、下载大小限制和运行失败的问题,并提供了完整的代码示例。
4974 2
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
194 0

热门文章

最新文章