H5 + Springboot 实现前端导出Excel功能

导出

提示：本文需要在有了一个可以运行的H5 + Springboot项目的前提下，用于开发一个导出功能

流程

1. 将输入框中的数据进行提取并整合进Map,当作参数向后端发送请求
2. 得到数据data后，生成一个二维数组arr ,用于生成excel(因为excel即为一个二维数组)，并将表头手动设置好
3. 将得到的数据 data 进行解析成 List 并遍历，加入二维数组arr中（即将data转化为二维数组形式）
4. 设置输出的excel的 Sheet名和文件名
5. 生成excel

前端代码

提前将 xlsx.full.min.js 下载并放在前端项目内

// 我自己项目的  (  ./的意思是当前目录下，所以js为当前文件的兄弟文件)
<script type="text/javascript" src="./js/xlsx.full.min.js"></script>

前端展示部分，其实就一个按钮就行 只要链接到后面的JS函数即可

// 这里的class是自己项目的 
// exportData() 是后面自己编写的JS函数名
<button onclick="exportData()">导出</button>

JS部分

//导出Excel
    function exportData(){
    	//新建一个map
        let para = {};
        //后台接口函数的地址
        // srv_url 内容为 http://ip/后端项目名，，，这里就不展示了
        let url = srv_url + "/res/equipmentstatistics/pub/getEquipmentStatisticsList";
		//将输入框的值赋进map 这里输入框使用的是easy-ui框架，不同框架的取值方式不一样，
		//其实就是在制作一个请求体，因为后台要利用前台传入的数据进行select where
        para.techType = $("#scName").combobox('getValue');// 给map加入一个键值对 "techType"=$("#scName").combobox('getValue') 以此类推
        para.name = $("#scABBR").combobox('getValue');
        para.neName = $("#scAREA").combobox('getValue');
        para.sysName = $("#scSTATION").combobox('getValue');
        para.begTime = $("#scVLEVEL").datebox('getValue');
		
		//这里的doAjax在后面有源码
        doAjax(url, "POST", JSON.stringify(para), function (data) {
        	//data为后端返回来的数据
            var data_list = data['rows'];  //我后台返回来的是一个map，里面rows的值为List类型
            //将List的data_list变成二维数组arr，arr即为最后的表格
            //添加表头信息
            var arr = new Array();
            arr[0]=['序号','OBJ_ID','设备名称','TECH_TYPE','投运时间'];
			//遍历数据，并一行一行的加入arr中
            for(var i=0;i<data_list.length;i++){
                arr[i+1] = new Array();
                arr[i+1][0] = data_list[i]['RO'];
                arr[i+1][1] = data_list[i]['OBJ_ID'];
                arr[i+1][2] = data_list[i]['NAME'];
                arr[i+1][3] = data_list[i]['TECH_TYPE'];
                arr[i+1][12] = new Date(data_list[i]['BEG_TIME']); 
            }
            console.log(arr); //得到arr数组，在控制台查看
            var filename = "设备信息管理.xlsx"; //文件名称
            var ws_name = "Sheet1"; //Excel第一个sheet的名称
			
			//到处excel，这里用到的函数，定义在xlsx.full.min.js中
            var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(arr);
            XLSX.utils.book_append_sheet(wb, ws, ws_name);  //将数据添加到工作薄
            XLSX.writeFile(wb, filename); //导出Excel

        });

    }

后端代码

该部分需要在了解Controller-Service-dao 三层结构，看过或自己实现过小demo的前提下进行
简单说一下运行流程，

1. getEquipmentStatisticsList（Controller层）接收到前端的请求参数map,
2. 将参数传给service层的的getEquipmentStatisticsList，
3. 再传入实现类的getEquipmentStatisticsList，
4. 再传入mapper的getEquipmentStatisticsList，
5. 再映射到与类名相同名称的xml文件中 id为getEquipmentStatisticsList的sql语句，
6. 此处sql返回值为map,但是mapper函数接收的返回值为List,因此，sql会将多个map封装进一个List中返回
7. 最终一层一层返回至controller,再返回给前端

Controller

按理说应该是Controller-Service-dao 分为三层，但这不是本文的重点，所以就直接Controller-dao(mapper)

@RestController
@RequestMapping(value = "/res/equipmentstatistics/pub/")
public class EquipmentStatisticsController {
	@Autowired
    private EquipmentStatisticsService equipmentStatisticsService; //service接口

	/**
     * 根据指定条件获取设备信息列表
     * @param map
     * @return
     */
    @RequestMapping(value = "/getEquipmentStatisticsList", method = RequestMethod.POST, produces = "application/json")
    @ResponseBody
    public Map getEquipmentStatisticsList(@RequestBody Map map) {  //map即为前端传过来的para
    	//getEquipmentStatisticsList在service接口实现类中定义,,
        return equipmentStatisticsService.getEquipmentStatisticsList(map);   
    }
}

Service类

Service实现类

   @Override
    public Map getEquipmentStatisticsList(Map map) {
        Map result = new HashMap();
        try {
        	//在类开头已经autowired过equipmentStatisticsMapper，不再展示，equipmentStatisticsMapper为mapper类，即dao层（存放函数都是与数据库交互的），getEquipmentStatisticsList为SQL语句
            result.put("rows", equipmentStatisticsMapper.getEquipmentStatisticsList(map));
            result.put("total", equipmentStatisticsMapper.getEquipmentStatisticsListCount(map));
            return result;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

mapper类

XML

与mapper类名相同的xml文件中的一个sql, 其中id与函数名相同，此处的代码只做示意用，并不是项目真实代码 （配置数据库连接的过程这里不做展示）

	//parameterType为参数类型，resultType为返回值类型
    <select id="getEquipmentStatisticsList" parameterType="java.util.HashMap" resultType="java.util.HashMap">
        select OBJ_ID,NAME FROM T_NE where
        <if test="name!=null and name!=''"> //这里的 name 即参数map中的name
            NAME=#{name}   //这里的#{name} 即参数map中的name，NAME为T_NE表中的字段
        </if>
    </select>

总结

至此 H5 + Springboot 实现前端导出 Excel 的功能就完成了
之前用的导出功能是用 easyui 实现的，即 $(’#dg’).datagrid(‘toExcel’, ‘设备信息管理.xls’) ，原理就是将一个前端展示的表格部分打印，所以虽然文件后缀为 .xls, 也可以用 Excel 打开（会报格式问题，但是可以强制打开）但是实际内部格式仍然是HTML 的，使得做导入功能的时候，无法读取该文件，必须得在 Excel 中另存为xls才可以。但是实际生产中，不可能让用户去完成这一步，但是如果为自己学习的话，图方便，EasyUI的导出会更加省事。
本人不才，弄这个东西查了一大堆文章才弄出来。所以这篇文章的话目的就是让避免小白发生我的问题，直接能看懂，但是，也需要在配置过数据库连接，以及对controller等三层结构有一点基础 (最起码看过例子)，以及对H5稍微有一点了解的基础下可以，比如如何取值，H5页面的结构等，要不然JS在哪写都不知道。如果还有什么问题或者发现这篇文章的漏洞，以及有更好的建议，欢迎评论区留言。