前言

实现前端页面基于 Vue，后端基于 JAVA ，最终通过前台页面点击下载excel模板文件，调用后端接口返回模板文件的输出流，将模板excel下载到本地。

需要注意的是：因为在实际应用场景中，后端是用SpringBoot打Jar包的方式部署到服务器中，所以需要后端适配对应的模板文件能够在服务器中，能够正常读取；本地运行代码的时候，需要注意，先使用 mvn clean，然后再 mvn install之后再运行代码，不然可能会报找不到对应的excel模板文件

一、JAVA后端接口设计

1.引入excel模板文件

存在excel模板文件的路径（resources目录下）：

template/excel/template.xlsx

2.excel模板下载接口实现

controller层接口设计：

@RestController
@RequiredArgsConstructor
@Api(tags = "excel：excel操作相关控制")
@RequestMapping("/api/excel")
public class ExcelController {@Autowiredprivate IExcelService excelService;@GetMapping("/excelTemplate")@ApiOperation("下载药物的excel导入模板")public void downloadExcelTemplate(HttpServletResponse response) throws IOException {excelService.downloadExcelTemplate(response);}
}

具体的业务实现逻辑：

package me.zhengjie.modules.excel.service.impl;import cn.hutool.core.io.IoUtil;
import me.zhengjie.modules.excel.service.IExcelService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedInputStream;
import java.io.InputStream;
import java.net.URLEncoder;@Service
public class ExcelServiceImpl implements IExcelService {private static final Logger LOGGER = LoggerFactory.getLogger(ExcelServiceImpl.class);private static final String EXCEL_TEMPLATE_PATH = "template/excel/template.xlsx";@Overridepublic void downloadExcelTemplate(HttpServletResponse response) {InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream(EXCEL_TEMPLATE_PATH);ServletOutputStream out = null;BufferedInputStream bis = new BufferedInputStream(inputStream);int buffer = 1024 * 10;byte[] data = new byte[buffer];try {String fileName = URLEncoder.encode("template.xlsx", "UTF-8");response.setContentType("multipart/form-data");response.setHeader("Content-Disposition", "attachment;fileName=" + fileName);int read;out = response.getOutputStream();while ((read = bis.read(data)) != -1) {out.write(data, 0, read);}out.flush();} catch (Exception ex) {IoUtil.close(out);LOGGER.error("下载excel导入模板失败", ex);} finally {IoUtil.close(inputStream);}}
}

3.启动后端服务

后端的接口读取Excel设计成从Jar包的路径中获取的，所以本地启动的时候，先执行 mvn clean, 然后再执行 mvn install, 最后再启动程序

二、Vue前端页面设计

1.excel模板下载接口定义

export function downloadExcelTemplate() {return request({url: '/api/excel/excelTemplate',method: 'get',responseType: 'blob'})
}

2.前端的下载按钮设计

    <el-buttonslot="left"type="warning"size="mini"style="margin-left: 60px"@click="downLoadTemplate()">导出模板</el-button>

3.vue下载模板文件的方法

downLoadTemplate() {downloadExcelTemplate().then(res => {console.log(res)const fileName = '模板文件'const url = window.URL.createObjectURL(new Blob([res]))const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', fileName + '.xlsx')document.body.appendChild(link)link.click()// 下载完成移除元素// document.body.removeChild(link)// 释放掉blob对象// window.URL.revokeObjectURL(url)}).catch(err => {console.log(err.response.data.message)})}

4.具体实现效果

总结

后端接口设计的时候，没有结合线上的实际情况，本地可以正常运行，打Jar包部署到开发环境，下载模板文件报错，查询报错日志发现是路径的问题，没有考虑Jar包中的模板文件实际路径。

vue下载的接口编写时，没有指定响应的类型，responseType: 'blob'，没有报错，但是下载的excel文件是损坏的，打开不了，重新指定了blob格式的响应数据，下载的excel模板文件才是正常的。

要勤思考、多动手，实践出真知！

Vue + JAVA 实现Excel的模板文件下载相关推荐

VUE+JAVA实现EXCEL模板下载
一.项目场景: VUE+JAVA实现EXCEL模板下载二.功能背景本人作为一个开发小白,今天接到一个小需求系统需要导入数据,也就十几个字段,我和老板说了,让客户一个一个去输入吧!然后我就被经理叫去 ...
Java根据excel/word模板进行值替换并且打成压缩包
目录一前端代码(MbTemplateList.vue) 二后端代码 MbTemplateController.java IMbTemplateService.java MbTemplateS ...
java实现excel的模板导出
映入pom依赖: <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml& ...
Java实现Excel导出模板
文章目录前言 1.1.测试准备 1.2.1 案例图片 1.2.2 导出解析为对象(基础) 1.2.3 动态导出(基础) 2. 环境准备 2.1 Maven 依赖 2.1 四个工具类 1.ExcelU ...
Java下载Excel的模板文件
系统有时候导入excel表格信息,需要用固定格式进行导入,所以用到excel模板 1.excel的导入模板格式注意要写对格式字段 2.我这边传入的服务器路径(路径传入很重要) 3.我这边传入到pdf ...
java生成excel/zip压缩文件下载
生成单表并下载 excel工具包 <dependency><groupId>org.apache.poi</groupId&g ...
java导出excel模板数据
Java导出excel数据模板,这里直接贴代码开发,流程性的走下去就是步骤: String[] colName=new String[]{"期间","科目代码" ...
Vue+SpringBoot 实现Excel表下拉框与模板文件下载
最近做的项目需要实现该功能,经过查找相关博客,故在此做整理. 一.前端 1.在A.service.js文件中 import axios from 'axios' // 业务服务上下文 const ba ...
java 动态导出excel表单无模板文件下载
java 动态导出excel表单无模板文件下载 public ResponseEntity<byte[]> exportStanding(@PathVariable Long signu ...

Vue + JAVA 实现Excel的模板文件下载

文章目录

前言