记录一下springboot+vue前后端分离实现的excel内容查询导出功能

---

前言

  文件导出功能是一种常态，大多数网站开发来说都会有各种形式的导出功能，以往使用ssm前后端不开的框架直接向后端发送一个请求，然后后端直接使用文件流的形式就可以实现下载功能，前端的操作就是一个请求而已。

  就目前来说，传统的前后端不分离的框架在企业中用的是越来越少了，基本上都是前后端分离项目，而前后端分离项目的导出功能再也不是前端只发送一个请求那么简单了，后端的文件流将不会自动下载，而在前端获取到文件流后在前端使用其他的方式去下载。本文将讲解springboot+vue前后端分离项目的导出功能.

---

一、引入apache.poi相关依赖

这里我们使用原生apache的excel模板相关功能，所有我们需要导入相关依赖。pom引入

        
        <dependency>
            <groupId>org.apache.poigroupId>
            <artifactId>poiartifactId>
            <version>4.1.0version>
        dependency>
        <dependency>
            <groupId>org.apache.poigroupId>
            <artifactId>poi-ooxmlartifactId>
            <version>4.1.0version>
        dependency>
         <dependency>
            <groupId>commons-iogroupId>
            <artifactId>commons-ioartifactId>
            <version>2.4version>
        dependency>

引入后等待maven自动下载对应依赖。

二、vue通过事件点击发送get请求

1.发送请求

下面是我的相关代码部分：
按钮点击事件：

 <a-button style="margin-left: 28px" type="primary" @click="excelExport">训练导出</a-button>

事件触发调用api接口：

excelExport() {
      excelExport({ organs: '01,02,03,04,05,06' }).then((res) => {
     //   const blob = new Blob([res], { type: 'application/octet-stream' })
        //IE10以上支持blob但是依然不支持download
     //   if ('download' in document.createElement('a')) {
          //支持a标签download的浏览器
   //      const link = document.createElement('a') //创建a标签
    //      link.download = 'train_data.xls' //a标签添加属性
     //     link.style.display = 'none'
     //     link.href = URL.createObjectURL(blob)
       //   document.body.appendChild(link)
       //   link.click() //执行下载
       //   URL.revokeObjectURL(link.href) //释放url
        //  document.body.removeChild(link) //释放标签
        }
        })

对应的接口路径：

import { getAllList, excelExport, excelImport,replaceUpdate } from '@/api/sys/compare'

封装好的axios请求：

//数据导出
export function excelExport(parameter){
  return axios({
    url: api.System+compareApi.excelExport,
    method: 'get',
    params: parameter,
    responseType:'blob'
  })
}

这里的请求格式不能错误，我们需要获取的是blob对象，然后通过对象去下载数据。必须：responseType:'blob’

2.后端接收请求

代码如下（示例）：

	//controller
	@GetMapping("excelExport")
    public void excelExport(String organs,HttpServletRequest request,HttpServletResponse response){
       dreamContainSearch.excelExport(organs,request,response);
    }

	//实现类
	@Override
    public void excelExport(String organs,HttpServletRequest request, HttpServletResponse response) {
        String sheetTitle = "测试导出数据";
        String [] title = new String[]{"id","no","标注标签","标注子标签"}; 
        String [] properties = new String[]{"id","no","organs","organsdetails"};  // 查询对应的字段
        List<Map> maps = dreamContainMapper.getExcelDatas(organs);
        ExcelUtil excelExport = new ExcelUtil();
        //内容集合
        excelExport.setData(maps);
        //excel内容字段
        excelExport.setHeardKey(properties);
        //字体
        excelExport.setFontSize(14);
        //标题
        excelExport.setTitle(sheetTitle);
        //excel的sheet也名称
        excelExport.setSheetName(sheetTitle);
        //表头的一行内容
        excelExport.setHeardList(title);
        try {
           excelExport.exportExport(request, response);
        }catch (Exception e){
            log.info("数据导出失败");
            e.printStackTrace();
        }
    }

3.ExcelUtil工具类

工具类实现的是简单的excel表格

package com.hfmxs.mxdream.utils;

import com.google.common.base.Strings;
import org.apache.poi.hssf.usermodel.*;
import org.apache.poi.ss.usermodel.HorizontalAlignment;
import org.apache.poi.ss.usermodel.VerticalAlignment;
import org.apache.poi.ss.util.CellRangeAddress;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.OutputStream;
import java.util.List;
import java.util.Map;
public class ExcelUtil {
    //表头
    private String title;
    //各个列的表头
    private String[] heardList;
    //各个列的元素key值
    private String[] heardKey;
    //需要填充的数据信息
    private List<Map> data;
    //字体大小
    private int fontSize = 14;
    //行高
    private int rowHeight = 30;
    //列宽
    private int columWidth = 150;
    //工作表
    private String sheetName = "sheet1";
    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String[] getHeardList() {
        return heardList;
    }

    public void setHeardList(String[] heardList) {
        this.heardList = heardList;
    }

    public String[] getHeardKey() {
        return heardKey;
    }
    public void setHeardKey(String[] heardKey) {
        this.heardKey = heardKey;
    }

    public List<Map> getData() {
        return data;
    }

    public void setData(List<Map> data) {
        this.data = data;
    }
    public int getFontSize() {
        return fontSize;
    }

    public void setFontSize(int fontSize) {
        this.fontSize = fontSize;
    }

    public int getRowHeight() {
        return rowHeight;
    }
    public void setRowHeight(int rowHeight) {
        this.rowHeight = rowHeight;
    }

    public int getColumWidth() {
        return columWidth;
    }

    public void setColumWidth(int columWidth) {
        this.columWidth = columWidth;
    }

    public String getSheetName() {
        return sheetName;
    }
    public void setSheetName(String sheetName) {
        this.sheetName = sheetName;
    }

    /**
     * 开始导出数据信息
     *
     */
     public byte[] exportExport(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //检查参数配置信息
        checkConfig();
        //创建工作簿
        HSSFWorkbook wb = new HSSFWorkbook();
        //创建工作表
        HSSFSheet wbSheet = wb.createSheet(this.sheetName);
        //设置默认行宽
        wbSheet.setDefaultColumnWidth(20);

        // 标题样式（加粗，垂直居中）
        HSSFCellStyle cellStyle = wb.createCellStyle();
        cellStyle.setAlignment(HorizontalAlignment.CENTER);//水平居中
        cellStyle.setVerticalAlignment(VerticalAlignment.CENTER);//垂直居中
        HSSFFont fontStyle = wb.createFont();
        fontStyle.setBold(false);   //加粗
        fontStyle.setFontHeightInPoints((short)14);  //设置标题字体大小
        cellStyle.setFont(fontStyle);
        //在第0行创建rows  (表标题)
        HSSFRow title = wbSheet.createRow((int) 0);
        title.setHeightInPoints(30);//行高
        HSSFCell cellValue = title.createCell(0);
        cellValue.setCellValue(this.title);
        cellValue.setCellStyle(cellStyle);
        wbSheet.addMergedRegion(new CellRangeAddress(0,0,0,(this.heardList.length-1)));
        //设置表头样式，表头居中
        HSSFCellStyle style = wb.createCellStyle();
        //在第1行创建rows
        HSSFRow row = wbSheet.createRow((int) 1);
        //设置列头元素
        HSSFCell cellHead = null;
        for (int i = 0; i < heardList.length; i++) {
            cellHead = row.createCell(i);
            cellHead.setCellValue(heardList[i]);
            cellHead.setCellStyle(style);
        };
        //开始写入实体数据信息
        int a = 2;
        for (int i = 0; i < data.size(); i++) {
            HSSFRow roww = wbSheet.createRow((int) a);
            Map map = data.get(i);
            HSSFCell cell = null;
            for (int j = 0; j < heardKey.length; j++) {
                cell = roww.createCell(j);
                cell.setCellStyle(style);
                Object valueObject = map.get(heardKey[j]);
                String value = null;
                if (valueObject == null) {
                    valueObject = "";
                }
                //取出的数据是字符串直接赋值
                value =  map.get(heardKey[j]).toString();
                //赋值
                cell.setCellValue(Strings.isNullOrEmpty(value) ? "" : value);
            }
            a++;
        }

        //导出数据
        try {
        //设置Http响应头告诉浏览器下载这个附件
            response.setHeader("Content-Disposition", "attachment;Filename=a.xls");
            response.setContentType("application/octet-strem;charset=utf-8");
            OutputStream outputStream = response.getOutputStream();
            wb.write(outputStream);
            outputStream.close();
            return wb.getBytes();
        } catch (Exception ex) {
            ex.printStackTrace();
            throw new IOException("导出Excel出现严重异常，异常信息：" + ex.getMessage());
        }

    }
    /**
     * 检查数据配置问题
     *
     * @throws IOException 抛出数据异常类
     */
    protected void checkConfig() throws IOException {
        if (heardKey == null || heardList.length == 0) {
            throw new IOException("列名数组不能为空或者为NULL");
        }
        if (fontSize < 0 || rowHeight < 0 || columWidth < 0) {
            throw new IOException("字体、宽度或者高度不能为负值");
        }

        if (Strings.isNullOrEmpty(sheetName)) {
            throw new IOException("工作表表名不能为NULL");
        }
    }
}

以上代码引用后将生成一个文件流返回在response中

4.返回的格式

在浏览器中查看到返回的文件流信息，说明后端的工作做完了。

只要有这个文件流返回，那么剩下的工作就是前端的事情了，前端需要将其转为blob对象，然后使用a标签中的下载功能即可下载出excel文件。

---

三、vue前端使用blob处理文件流

1.处理文件流并下载excel文件

excelExport({ organs: '01,02,03,04,05,06' }).then((res) => {
        const blob = new Blob([res], { type: 'application/octet-stream' })
        //IE10以上支持blob但是依然不支持download
        if ('download' in document.createElement('a')) {
          //支持a标签download的浏览器
          const link = document.createElement('a') //创建a标签link.download = '标注数据.xls' //a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() //执行下载
          URL.revokeObjectURL(link.href) //释放url
          document.body.removeChild(link) //释放标签
        }
      })
    },

此处注意格式
const blob = new Blob([res], { type: ‘application/octet-stream’ })
a标签属性可以自行百度查看

2.如果第一步完成后下载的excel文件打不开，编码后打开乱码形式就可以继续往下，当然第一步完成没问题就不需要看了

这是我自己遇到的情况，使用这种方式下载的文件打不开，其实文件格式与扩展名格式不一致，然后点击是之后打开的文件全部乱码

  这个原因我之前以为是代码问题，然后我改了很多很多的代码，用来很多的方式，前端后端都改了。然后百度有个说的是mock会影响blob的作用。我自己想着我目前这里是没有用到mock的，但是项目是有的。
  最后使用yarn remove mockjs2（我的是mockjs2）卸载，然后改改其他地方的报错，终于可以了。。。。
最终效果：

总结

虽然问题解决了，但是我感觉这个excel的工具类并不是那么的好用，而且有很多推荐使用的easypoi去导出excel。后面我会测试下easypoi的导出excel的功能。

全都是mock的错