Springboot+Vue+EasyExcel实现web页面的excel下载

读取跟着教程做很容易，下载自己摸索属实费了点功夫
按照官网教程来做https://alibaba-easyexcel.github.io

新建了一个springboot工程，然后访问地址，确实可以弹出下载页，但是现有项目整合了springsecurity，不管怎么搞，前端点击下载按钮总是没反应。
后台部分：
1：controller

@ApiOperation(value = "导出excel") //swageer2注解，可忽略@GetMapping("/getExcel")public void getExcel(HttpServletResponse response) throws IOException {List<MemoryExcel> list= memoryAnalyseService.getExcelList(); //这里的集合是对应的导出实体模型，可自己任意填充数据，我这里采取从数据库获取response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系Date date = new Date();SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");String name = sdf.format(date);String fileName = URLEncoder.encode(name+"内存数据", "UTF-8");response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");//   Student.class 是按导出类  data()应为数据库查询数据，这里只是模拟EasyExcel.write(response.getOutputStream(), MemoryExcel.class).sheet("模板").doWrite(list);}

MemoryExcel是需要生成的excel模型，每一列的属性，如下图，getExcelList是通过查询数据库表，需要生成的MemoryExcel的List集合，

这里后台就处理完了，主要是前端需要处理了，

首先导入：import {exportExcels} from "@/api/computer/exportExcel";

exportExcel.js里面定义了请求后台方法：

import exportExcel from '@/utils/utils'export function exportExcels(data) {return exportExcel({url: '/memory/getExcel',method: 'get',responseType: 'blob'})
}

再定义utils.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
//此处忽略了部分非必要的导入// create an axios instance
const service = axios.create({//baseUrl请修改为你自己的urlbaseURL: process.env.BASE_API,// url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: 500000 // request timeout
})// request拦截器
service.interceptors.request.use(config => {if (store.getters.token) {config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}return config},error => {// Do something with request errorconsole.log(error) // for debugPromise.reject(error)})// response interceptor
service.interceptors.response.use(response => {let disposition = response.headers['content-disposition'];//以下部分有需要优化，如后端返回时没有携带文件后缀名,没有.时会有问题等等let filename = disposition?disposition.substring(disposition.indexOf('=')+1,disposition.indexOf('.')):"下载文件";//let newName = decodeURI(escape(filename))let newName = decodeURI(filename)let extName =disposition.substring(disposition.indexOf('.')+1)let blob = new Blob([response.data],{type: 'application/vnd.ms-excel'});let link = document.createElement("a");let evt = document.createEvent("HTMLEvents");evt.initEvent("click", false, false);link.href = URL.createObjectURL(blob);link.download = newName+"."+extName;link.style.display = "none";document.body.appendChild(link);link.click();window.URL.revokeObjectURL(link.href);},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

因为这是用vue模板做的，所以这上面的getToken 等就没写了，如果这里没处理好，访问接口会报错401，未登录token过期什么的，

下载页面的的按钮绑定下载方法exportExcel
在methods里面定义方法：

 exportExcel(){//此处就是导出exportExcels().then()}

前台部分完成，保存、测试：

参考链接：Vue+easyexcel实现excel导入导出

Springboot+Vue+EasyExcel实现web页面的excel下载相关推荐

SpringBoot 整合EasyExcel详解(一)-高性能Excel方案
SpringBoot 整合EasyExcel详解(二)-写Excel SpringBoot 整合EasyExcel详解(三)-填充Excel-官方原版一.概述 Java解析.生成Excel比较有名的 ...
Vue是如何渲染页面的，渲染过程以及原理代码
Vue是如何渲染页面的,渲染过程以及原理代码:https://www.cnblogs.com/ypinchina/p/7238402.html 转载于:https://www.cnblogs.com/ ...
APL在Web应用系列 --- 例子1: 在Web页面的javascript中调用 apl脚本
这个专题专门讲 APL平台在 Web中的应用. APL平台在Web中应用范围包括: 1. 在Web服务端应用: APL平台中, aplHttpServer.exe( APL中本地的Web服务器 ...
java语言基于springboot+vue+elementUI 基于web的智慧养老平台-#计算机毕业设计
项目介绍随着社会的发展我国的人口老龄化严重,为了让这些在年前是给社会做出过贡献的老人老有所依,老有所养,度过一个安详的晚年,很多地方都实现了智慧养老,为此我们通过springboot+vue+ele ...
web页面的js中检测浏览器是否加载flash插件，用来确保视频播放器和flash上传的正常运行
web页面的js中检测浏览器是否加载flash插件,用来确保视频播放器和flash上传的正常运行 <script type="text/javascript" languag ...
【移动端适配一】移动端Web页面的ios安全区适配
背景从苹果手机 iphoneX 发布之后,前端人员在开发移动端Web页面时,得多注意一个对 IOS 所谓安全区域范围的适配.这其实说白了就是 iphoneX 之后的苹果手机,在页面上,你需要对顶部和 ...
Vue对单独的页面的body样式设置
由于需要对登录界面的body样式进行设置在首页直接设置body{}实现不了需要像这样设置: export default {beforeCreate: function() {document.g ...
Vue+Echarts制作单页面的XMR矿池监控台
练手用的,数据源是从矿池官网拿的json,页面源代码存个档 <!DOCTYPE html> <html lang="en"><head>< ...
jmeter验证WEB页面的href链接请求
1. 第一步: 创建Samper_HTTP请求,打开测试页面 2. 第二步: 创建后置处理器_正则表达式(也有其他方式,这里仅介绍正则) 如图 3. 第三步创建逻辑控制器_ForEach控制器,配置 ...
内网IP变更后，内网致信客户端不能正常打开WEB页面的OA
致远OA,致信客户端,在内网IP修改变更后,后台的致信配置也要进行修改.首先,停止OA的业务,为确保完全停止,重启服务器.登录system系统管理员账户.找到功能应用设置-->致信管理,如下图. ...

Springboot+Vue+EasyExcel实现web页面的excel下载

Springboot+Vue+EasyExcel实现web页面的excel下载相关推荐

最新文章

热门文章