springboot+vue+element-ui下载excel模板（静态文件）

前端：

html:<div style="margin-top: 20px"><el-button  @click="downloadDemo" size="small">下载模板</el-button></div>js:downloadDemo () {let url = Config.context + '/userManager/downloadExcel'this.common.exportData(url, this.queryForm, '数据模板_' + this.common.getTime())}

  exportData (url, data, fileName) {axios({method: 'POST',url: url,data: data,responseType: 'blob'}).then(response => {if (!response) {return}const blob = new Blob([response.data])if (window.navigator && window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, fileName)} else {let u = window.URL.createObjectURL(response.data)let aLink = document.createElement('a')aLink.style.display = 'none'aLink.href = uaLink.setAttribute('download', fileName + '.xlsx')document.body.appendChild(aLink)aLink.click()document.body.removeChild(aLink)window.URL.revokeObjectURL(u)}}).catch(error => {throw error})}

后端：

controller层：

    @RequestMapping("/downloadExcel")public ResponseEntity<byte[]> download2() throws IOException {File file = excelModelService.buildXlsById();return FileUtils.buildResponseEntity(file);}

service层：

import org.springframework.stereotype.Service;
import org.springframework.util.ResourceUtils;import java.io.File;
import java.io.FileNotFoundException;@Service
public class ExcelModelService {public File buildXlsById(){//do something to find this fileFile file=null;try {file = ResourceUtils.getFile("classpath:templates/model.xlsx");} catch (FileNotFoundException e) {e.printStackTrace();}return file;}
}

这里写的是静态文件的存放路径，注意不能中文名不然识别不了

文件下载工具类：

    public static ResponseEntity<byte[]> buildResponseEntity(File file) throws IOException {byte[] body = null;//获取文件InputStream is = new FileInputStream(file);body = new byte[is.available()];is.read(body);HttpHeaders headers = new HttpHeaders();//设置文件类型headers.add("Content-Disposition", "attchement;filename=" + file.getName());//设置Http状态码HttpStatus statusCode = HttpStatus.OK;//返回数据ResponseEntity<byte[]> entity = new ResponseEntity<byte[]>(body, headers, statusCode);return entity;}

后续补充：

以上方式实现在开发环境没有任何问题，但是在生产环境会出现无法下载后台报错的情况，原因在于用流的方式读取文件，打成jar包之后，下载的文件会被损坏，后来网上说配置pom里面文件路径等等试了没用，直接用了POI的导出

修改后controller：

   @RequestMapping(value="/downloadExcel")public ResponseEntity<Resource> excel2007Export(HttpServletResponse response, HttpServletRequest request) {try {ClassPathResource cpr = new ClassPathResource("/templates/"+"model.xlsx");InputStream is = cpr.getInputStream();Workbook workbook = new XSSFWorkbook(is);String fileName = "model.xlsx";downLoadExcel(fileName, response, workbook);} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return new ResponseEntity<Resource>(HttpStatus.OK);}

文件工具类downLoadExcel：

    public static void downLoadExcel(String fileName, HttpServletResponse response, Workbook workbook) {try {response.setCharacterEncoding("UTF-8");response.setHeader("content-Type", "application/vnd.ms-excel");response.setHeader("Content-Disposition","attachment;filename=\"" + URLEncoder.encode(fileName, "UTF-8") + "\"");workbook.write(response.getOutputStream());} catch (IOException e) {e.printStackTrace();}}

springboot+vue+element-ui下载excel模板（静态文件）相关推荐

实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
Vue +Element UI后台管理模板搭建示例
2019独角兽企业重金招聘Python工程师标准>>> 一.蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vu ...
springboot打成Jar包下载Excel模板文件损坏问题
最近遇到Springboot环境项目打成jar后下载Excle文件出现损坏问题,我是在网上找了这种方法解决的: String fileName = "aaa.xlsx"; Clas ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
vue下载excel模板文件，excel读取
一.下载excel模板文件 <template><a-button type="primary" @click="downloadExcel" ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...

springboot+vue+element-ui下载excel模板（静态文件）

springboot+vue+element-ui下载excel模板（静态文件）相关推荐

最新文章

热门文章