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

相关文章
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
21天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
82 0
|
2月前
|
SQL JSON Java
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
本文为Spring Boot增删改查接口的小白入门教程,介绍了项目的构建、配置YML文件、代码编写(包括实体类、Mapper接口、Mapper.xml、Service和Controller)以及使用Postman进行接口测试的方法。同时提供了SQL代码和完整代码的下载链接。
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
|
26天前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
190 0
|
3月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
5天前
|
API 持续交付 开发者
后端开发中的微服务架构实践与挑战
在数字化时代,后端服务的构建和管理变得日益复杂。本文将深入探讨微服务架构在后端开发中的应用,分析其在提高系统可扩展性、灵活性和可维护性方面的优势,同时讨论实施微服务时面临的挑战,如服务拆分、数据一致性和部署复杂性等。通过实际案例分析,本文旨在为开发者提供微服务架构的实用见解和解决策略。
|
3天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
1天前
|
消息中间件 监控 数据管理
后端开发中的微服务架构实践与挑战####
【10月更文挑战第29天】 在当今快速发展的软件开发领域,微服务架构已成为构建高效、可扩展和易于维护应用程序的首选方案。本文探讨了微服务架构的核心概念、实施策略以及面临的主要挑战,旨在为开发者提供一份实用的指南,帮助他们在项目中成功应用微服务架构。通过具体案例分析,我们将深入了解如何克服服务划分、数据管理、通信机制等关键问题,以实现系统的高可用性和高性能。 --- ###
20 2
|
2天前
|
存储 JavaScript 前端开发
探索后端开发:从基础到进阶的旅程
【10月更文挑战第31天】本篇文章旨在通过浅显易懂的语言,带领读者了解后端开发的奥秘。我们将一起探讨后端开发的核心概念、常用技术栈,以及如何通过实践不断提升自己的后端技能。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供一个清晰的学习路径和实用的建议。让我们一起踏上这段探索后端世界的旅程吧!
8 1
|
3天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
11 2