一、项目场景：

VUE+JAVA实现EXCEL模板下载

二、功能背景

本人作为一个开发小白，今天接到一个小需求系统需要导入数据,也就十几个字段,我和老板说了,让客户一个一个去输入吧!然后我就被经理叫去了办公室准备给我开开荤,经理说了,给你半天时间想法解决掉,否则你的XX就不保.然后,为了保住我的XX,决定搞一波事情。

三、实现思路

既然不让一个一个输入，那就搞个EXCEL模板，允许导入可行吧。
遵循这个思路，于是开始了【模板下载】的创作之旅，参考了几篇文章，也借鉴了几个，发现多多少少有点问题，于是乎在巨人的肩膀上，进行了改造，终于将功能实现，请有需要的各位老爷可参考以下代码：

四、代码实现

该项目使用JAVA编写后台，VUE编写前台。

4.1后台JAVA

注： response.setHeader(“content-type”, “application/vnd.ms-excel”);
response.setHeader(“Content-Length”,String.valueOf(bs.available()));
这两个属性必须设置，否则会有意想不到的错误出现!!

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.IOException;import java.io.InputStream;import java.net.URLEncoder;@Servicepublic class TestCaseService {    private static final Logger LOGGER = LoggerFactory.getLogger(TestCaseService.class);    private static final String EXCEL_TEMPLATE_PATH = "template/template.xlsx";    /*     * * @Description 模板下载功能     * @Date 下午 17:16:37 2022-4-19     * @Param [response]     * @return void     **/   public void exportTemplate(HttpServletResponse response) throws IOException {InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream(EXCEL_TEMPLATE_PATH);BufferedInputStream bs = new BufferedInputStream(inputStream);ServletOutputStream out = null;byte[] data = new byte[1024];try {      String fileName = URLEncoder.encode("template.xlsx", "UTF-8");    response.setCharacterEncoding("UTF-8");    response.setHeader("content-type", "application/vnd.ms-excel");    response.addHeader("Content-Disposition", "attachment;fileName=" + fileName);    response.setHeader("Content-Length",String.valueOf(bs.available()));    out = response.getOutputStream();    int len = 0;    //以下两种方式均可    while((len = bs.read(data)) >0){ out.write(data, 0, len);    }    //while((len = bs.read(data)) !=-1){    //   out.write(data, 0, len);    //}    out.flush();    out.close();} catch (Exception ex) {    LOGGER.error("下载excel模板失败", ex);}   }}

4.2前台VUE

4.2.1. 下载按钮：

 <el-button type="primary" @click="exportTemplate()">下载模板</el-button>

4.2.2.下载方法：

注：{ type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’ }，该类型代表是xlsx

 exportTemplate() {      testcase.exportTemplate().then(response => { // 通过 a 标签创建一个虚拟链接下载文件 var blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 这里表示xlsx类型 const a = document.createElement('a') a.download = '模板文件'//可以自定义，也可以hearder里面截取 a.style.display = 'none' a.href = URL.createObjectURL(blob) document.body.appendChild(a) a.click() URL.revokeObjectURL(a.href) // 释放URL 对象 document.body.removeChild(a)      }).catch(err => { console.log(err.response.data.message)      })    }

4.2.3. 前台调用的接口

注：因公司框架已经封装好了axios的请求，所以下图代码为使用封装好的组件进行调用，如果需要，可自行网上搜索VUE调用后台接口方法。
responseType:'blob’这个熟悉一定要配置，否则前台控制台一片红

  exportTemplate() {    return request({      url: '/testcase/exportTemplate',      method: 'post',      responseType: 'blob'    })  },

以上就是本人今天做的一个小小的EXCEL下载的方法，不说了，去找经理谈谈去了。。。。