vue中后端做Excel导出功能返回数据流前端如何做处理

项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。

先看下效果图：

页面效果：

点击导出Excel 调用导出接口成功了：

后台返回的数据流，一堆看不懂的乱码：

接下来要处理这堆乱码，因为用到的地方多，所以在util.js文件里封装了一个公共方法并抛出：

虽然vue里有封装好的请求接口的方法，但这里要单独用axios，所以先在util.js里引入axios

import axios from 'axios'

// 导出Excel公用方法
export function exportMethod(data) {axios({method: data.method,url: `${data.url}${data.params ? '?' + data.params : ''}`,responseType: 'blob'}).then((res) => {const link = document.createElement('a')let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})link.style.display = 'none'link.href = URL.createObjectURL(blob)// link.download = res.headers['content-disposition'] //下载后文件名link.download = data.fileName //下载的文件名document.body.appendChild(link)link.click()document.body.removeChild(link)}).catch(error => {this.$Notice.error({title: '错误',desc: '网络连接错误'})console.log(error)})
}

在使用的页面中引入方法：

import { exportMethod } from '@/libs/util'

在methods导出的方法里，调用共用导出方法。

注意：因为我们后台用的是get方法，所以传递get请求并且拼接要传的参数，如果是post请求，就把传递的get改成post，传递数据改成传data数据对象，params去掉，公共方法里把url上拼接的参数也去掉，直接接收url路径即可，再接收一个data就行了

// 导出会诊接诊量统计表exportDepReceRank() {let myObj = {method: 'get',url: exportDepartmentRankUrl,fileName: 'XX医院—各科室会诊接诊量统计',params: `startDate=${changeDate(this.dateValue[0])}&endDate=${changeDate(this.dateValue[1])}`}exportMethod(myObj)},

最后成功导出Excel的效果图：

vue中后端做Excel导出功能返回数据流前端如何做处理相关推荐

spring boot + vue 使用poi实现Excel导出功能(包括Excel样式调整，以及前后端代码)
可以直接复制拿来用哟.(#^.^#) 目录一.pom.xml依赖二.代码大致流程是这样的三.后端工具类四.基于vue,使用axios调用后端接口,实现下载文件的方法五.看效果一.pom.x ...
vue导出excel加一个进度条_vue 实现excel导出功能
最近Vue项目中用到了导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能我是使用vue-cli3.0的框架,所以在安装过程中没有遇到 ...
解决通过调用后台接口实现Excel导出功能，后台返回数据乱码的问题
解决通过调用后台接口实现Excel导出功能,后台返回数据乱码的问题问题如下: 这导致我虽然成功导出文件,但文件受损打不开解决方案如下: 在调用接口加入: // 导出 export function ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
基于easyexcel的MySQL百万级别数据的excel导出功能
前言最近我做过一个MySQL百万级别数据的excel导出功能,已经正常上线使用了. 这个功能挺有意思的,里面需要注意的细节还真不少,现在拿出来跟大家分享一下,希望对你会有所帮助. 原始需求:用户在U ...
Vue中实现自定义excel下载
最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能. 实现下载有两种方式,一种是后端生成一个excel,放在服务器指定目录下,然后前端直接去后端拿.第二种是后端传给前端一个j ...
如何在 Asp.Net Core 实现 Excel 导出功能
在web应用程序开发时,或许你会遇到这样的需求,如何在 Asp.Net Core 中实现 excel 或者 word 的导入导出,在 NuGet 上有大量的工具包可以实现这样的功能,本篇就讨论下如何使 ...
根据children动态复杂表头excel导出_Java高级特性-注解：注解实现Excel导出功能
注解是 Java 的一个高级特性,Spring 更是以注解为基础,发展出一套"注解驱动编程". 这听起来高大上,但毕竟是框架的事,我们也能用好注解吗? 的确,我们很少有机会自己写注 ...
java数据导出ex_Java高级特性注解：注解实现Excel导出功能
作者:JerryWu来源:SegmentFault 思否社区注解是 Java 的一个高级特性,Spring 更是以注解为基础,发展出一套"注解驱动编程". 这听起来高大上,但毕竟 ...

vue中后端做Excel导出功能返回数据流前端如何做处理

vue中后端做Excel导出功能返回数据流前端如何做处理相关推荐

最新文章

热门文章