物联网设备数据流转之数据如何导出：Excel文件

其实，到现在为止，前面的页面已经实现了对设备数据的展现。这一篇文章中对当前的项目做一个增强：

• 绘制Echarts 图表展示数据变化趋势；
• 导出设备数据到Excel，体验TDengine的查询效率；

这两个功能的实现均需要前后端配合，完成数据交互，我们先实现后端接口，然后在前端调用。

在实际项目中会遇到各类数据导出的需求，比如将物联网设备数据按照时间范围导出为 Excel 文件以及各种统计结果数据导出为文件的功能。

        
        
            cn.hutool
            hutool-all
            5.5.6
        

        
        
            org.apache.poi
            poi-ooxml
            4.1.1
        

通过 poi 与 hutool 工具类，实现从 TDengine 的条件查询功能：指定时间范围内的设备数据导出为 Excel 文件。

• PowerController.java

    
    @GetMapping("exportXls")
    public void exportExcel(HttpServletResponse response, @RequestParam Map params) throws IOException, ClassNotFoundException {
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.eq("sn", params.get("sn"));
        wrapper.between("ts", params.get("startTime"), params.get("endTime"));
        wrapper.orderByDesc("ts");
        List powers = powerMapper.selectList(wrapper);

        List> rows = powers.stream().map(item -> {
            Map maps = new HashMap<>();
            maps.put("ts", item.getTs().toString());
            maps.put("voltage", item.getVoltage());
            maps.put("currente", item.getCurrente());
            maps.put("temperature", item.getTemperature());
            maps.put("sn", item.getSn());
            maps.put("city", item.getCity());
            maps.put("groupid", item.getGroupid());
            return maps;
        }).collect(Collectors.toList());

        ExcelWriter writer = ExcelUtil.getWriter();

        // Title
        int columns = Class.forName("com.heartsuit.storage.domain.Power").getDeclaredFields().length;
        writer.merge(columns - 1, "历史数据");

        // Header
        writer.addHeaderAlias("ts", "时间");
        writer.addHeaderAlias("voltage", "电压");
        writer.addHeaderAlias("currente", "电流");
        writer.addHeaderAlias("temperature", "温度");
        writer.addHeaderAlias("sn", "设备编号");
        writer.addHeaderAlias("city", "城市");
        writer.addHeaderAlias("groupid", "分组ID");

        // Body
        writer.setColumnWidth(0, 30);
        writer.setColumnWidth(1, 30);
        writer.setColumnWidth(2, 30);
        writer.setColumnWidth(3, 30);
        writer.setColumnWidth(4, 30);
        writer.setColumnWidth(5, 30);
        writer.setColumnWidth(6, 30);
        writer.setColumnWidth(7, 30);
        writer.write(rows, true);

        response.setContentType("application/vnd.ms-excel;charset=utf-8");
        response.setHeader("Content-disposition", "attachment; filename=" + URLEncoder.encode("设备device" + params.get("sn") + "历史数据-" + DateUtil.today() + ".xls", "utf-8"));

        ServletOutputStream out = response.getOutputStream();
        writer.flush(out, true);
        writer.close();
        IoUtil.close(out);
    }

在 PowerView.vue 中添加以下代码，主要是一个按钮以及导出接口调用，实现将物联网设备数据按照时间范围导出 Excel 文件的功能。

• 结构

    导出

• 行为

exportXls: function() {
    if (this.deviceDataPage.records.length == 0) {
        this.$message({
            type: "warning",
            message: "暂无数据",
            center: false,
            showClose: true,
        });
        return;
    }
    if (!this.dateRange) {
        this.$message({
            type: "error",
            message: "请选择时间范围！",
            showClose: true,
        });
        return;
    }
    this.exportLoading = true;
    let startTime = this.dateRange[0];
    let endTime = this.dateRange[1];
    let that = this;
    axios
        .get(
            `/api/power/exportXls?sn=${this.sn}&startTime=${startTime}&endTime=${endTime}`, {
                responseType: "blob"
            }
        )
        .then(
            function(res) {
                if (res.status == 200) {
                    that.exportLoading = false;
                    let blob = new Blob([res.data]);
                    let downloadElement = document.createElement("a");
                    let href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = decodeURI(
                        res.headers["content-disposition"].substr(
                            "attachment; filename=".length
                        )
                    );
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                } else {
                    that.exportLoading = false;
                    console.error(res);
                }
            },
            function(res) {
                that.exportLoading = false;
                console.error(res);
            }
        );
},

另外，导出 Excel 的功能还重在体验 TDengine 的查询效率。在实际中，曾遇到有的项目中使用前端插件导出 Excel 的方式，这在数据量比较大时，对客户端要求比较高，导出非常慢，影响用户体验。我们这里采用后端直接查询、封装、导出文件的方式实现从亿级记录中导出1万条数据，秒级。

• Vue3.0
• ElementPlus

If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!