VUE+JAVA实现EXCEL模板下载

一、项目场景：

VUE+JAVA实现EXCEL模板下载

二、代码实现

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

2.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;
@Service
public 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);
       }
   }
}

2.2前台VUE

2.2.1. 下载按钮：

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

2.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)
      })
    }

2.2.3. 前台调用的接口

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

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