springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)

excel上传及下载vue、springboot 、java

  • java springboot + vue 文件上传与下载(element ui)
    • 上传
      • 前端 el-upload
      • 后端 接收流文件
    • 下载
      • 前端 类似于a标签
      • 后端 response响应

java springboot + vue 文件上传与下载(element ui)

网上很多关于文件上传和文件下载的,但是试了一下感觉很多都不能解决我的问题,这篇博客主要是以excel的上传和下载为例子。vue使用的是element ui,过程中还涉及到采用token去访问网关。完整的整个流程都在这篇博客上。由于代码设计到公司内网,所以没办法拷贝,就截图了。理解为主。

上传

前端 el-upload

springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第1张图片
上传按钮,效果就和其他的上传文件效果一样吧,这个在别的地方也是可以找到的,详情参考开发手册(element ui)

获取token以及封装头:
在这里插入图片描述
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第2张图片
可以把header以这种方式去获取token,把token封装到headers里边,请求就能通过网关。

后端 接收流文件

springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第3张图片controller层接收为流
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第4张图片可以直接以这个为入口去构建一个workbook实现读取的功能。因为multipartFile.transferTo已经把流文件里的内容传入到要写的文件中,接下来就是读取了。
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第5张图片
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第6张图片
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第7张图片
读取单元格内容到object

下载

前端 类似于a标签

springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第8张图片
写一个button去触发就能实现,downloadUrl是后端controller层的地址,如果需要经过网关,前面还得加上网关代理解析的头
获取token参考上传的获取。
这种方式的下载能成功避免乱码,亲测有效。

后端 response响应

下载会先去将数据库里的内容封装成一个excel先存在本地(不知道有没有更好的解决方案,理论应该有),然后通过workbook的流写回。(图片格式为先是返回已有的excel,另一个是取封装从数据库取出来的excel的写入,数据库内容存放在list里)
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第9张图片springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第10张图片工具类实现返回已有的excel(注意设置格式,这里同时设置了下载文件的文件名字)springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第11张图片controller层以get的方式去接收resp
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第12张图片springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第13张图片springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第14张图片
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第15张图片
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第16张图片![在这里插入图片描述](https://img-blog.csdnimg.cn/20190828110554512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ2NzY5,size_16,color_FFFFFF,t_70springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第17张图片
springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)_第18张图片

你可能感兴趣的:(springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式))