若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出

柔情只为你懂 2023-10-05 09:16 10阅读 0赞

## 场景 ##

使用若依前后端分离版实现Excel的导入和导出。

前端:Vue+ElementUI

后端:SpringBoot+POI+Mysql

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

### Excel导入 ###

点击导入按钮时的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

选中Excel后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

首先是前端页面，添加导入的dialog

<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            :data="{updateSupport:upload.updateSupport}"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的下井次数设置数据
              <el-link
                type="info"
                style="font-size:12px"
                @click="downloadTemplate('xjszTemplate.xlsx')"
              >下载模板</el-link>
            </div>
            <div
              class="el-upload__tip"
              style="color:red"
              slot="tip"
            >提示：仅允许导入“xls”或“xlsx”格式文件！是否全勤中：1代表全勤，0代表固定次数，不得有空值！！</div>
          </el-upload>
    
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </div>
        </el-dialog>

通过:visible.sync="upload.open"控制默认隐藏，其中upload是声明的用于存储上传相关的参数的model

需要声明它

export default {
      name: "Xjcssz",
      data() {
        return {
          // 导入参数
          upload: {
            // 是否显示弹出层
            open: false,
            // 弹出层标题
            title: "",
            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的数据
            updateSupport: 0,
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            // 上传的地址
            url: process.env.VUE_APP_BASE_API + "/kqgl/xjcssz/importData",
          },

这里的getToken()是从auth中引入

import { getToken } from "@/utils/auth";

是要获取登录的token

export function getToken() {
      return Cookies.get(TokenKey)
    }

文件上传组件使用的是e-upload组件，设置其一些属性

limit限制只能选择一个文件

accept限制能选择的文件类型

headers设置请求头携带token

action设置上传请求的url

disabled设置正在上传时禁用

on-progress设置正在上传时的处理事件

on-success设置上传成功后的事件

auto-upload设置自动提交为false，用来实现手动提交时才提交

data设置上传时携带的数据

drag表示支持可拖拽

设置on-progress正在上传时将其禁用

// 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
          this.upload.isUploading = true;
        },

设置on-success上传成功后关闭上传窗口并设置上传可用，然后清除选择的文件并提示导入结果然后刷新数据。

// 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
          this.upload.open = false;
          this.upload.isUploading = false;
          this.$refs.upload.clearFiles();
          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
          this.getList();
        },

这里是携带了参数 是否更新已经存在的数据，将其与勾选框进行双向数据绑定

<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的下井次数设置数据

并且作为参数在提交时进行传递

:data="{updateSupport:upload.updateSupport}"

注意传递参数时的格式。

然后点击确定按钮时触发事件

<el-button type="primary" @click="submitFileForm">确 定</el-button>

在事件处理中，通过设置的ref属性将表单提交

submitFileForm() {
          this.$refs.upload.submit();
        },

此时表单就会提交到指定的url的后台接口。

来到后台接口

@RequestMapping("/importData")
        @ResponseBody
        @ApiOperation("导入下井次数设置数据")
        public AjaxResult importData(@RequestParam MultipartFile file, @RequestParam boolean updateSupport) throws Exception {
            ExcelUtil<KqXjcssz> util = new ExcelUtil<KqXjcssz>(KqXjcssz.class);
            List<KqXjcssz> xjcsszList = util.importExcel(file.getInputStream());
            //循环插入数据
            for (KqXjcssz xjcssz:xjcsszList) {
                if(xjcssz.getGh()==null)
                {
                    return  AjaxResult.error("存在为空的工号数据");
                }
    
                xjcssz.setSzrq(new Date());
                xjcssz.setSzr(SecurityUtils.getUsername());
    
                //根据工号查询是否已经存在
                Integer count = kqXjcsszService.isExistByGh(xjcssz.getGh());
    
                if(count>0)
                {
                    //如果设置了更新
                    if(updateSupport)
                    {
                        kqXjcsszService.updateKqXjcssz(xjcssz);
                    }else
                    {
                        //选择了不更新 啥也不干
                    }
                }
                else
                {
                    //之前不存在直接插入
                    kqXjcsszService.insertKqXjcssz(xjcssz);
                }
            }
            return AjaxResult.success("导入成功");
        }

这里的后台接口使用@RequestMapping接收，并且使用@ResponseBody注解响应json数据。

接受请求参数时，文件必须是@RequestParam MultipartFile file，且名称为file，如果不进行更改指定的话。

然后第二个参数要与传递时的参数名一致。

然后调用若依自带的工具类

ExcelUtil<KqXjcssz> util = new ExcelUtil<KqXjcssz>(KqXjcssz.class);
            List<KqXjcssz> xjcsszList = util.importExcel(file.getInputStream());

以及实体类上的注解

/** 工号 */
        @Excel(name = "工号")
        private String gh;

等就能实现解析Excel的数据并获取成对象的list。

这里的导入时的模板建议用下面的导出的EXCEL作为导入模板用。

然后上传时点击下载模板时调用公共下载接口。

### Excel导出 ###

页面上添加导出按钮

<el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['kqgl:bcgl:export']"
            >导出</el-button>

导出按钮对应的处理方法

/** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm("是否确认导出所有数据项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(function () {
              return exportBcgl(queryParams);
            })
            .then((response) => {
              this.download(response.msg);
            })
            .catch(function () {});
        },

会弹窗提示，点击确定后执行exportBcgl方法，此方法是从外部js中引入

import {
      exportBcgl,
    } from "@/api/kqgl/bcgl";

在js方法中

export function exportBcgl(query) {
      return request({
        url: '/kqgl/bcgl/export',
        method: 'get',
        params: query
      })
    }

在此方法中发送get请求给SpringBoot后台接口。

其中request是来自request.js,封装的axios发送请求的对象。

在对应的SpringBoot后台接口

@GetMapping("/export")
        public AjaxResult export(KqBcgl kqBcgl)
        {
            List<KqBcgl> list = kqBcglService.getBcListByNameToExport(kqBcgl);
            ExcelUtil<KqBcgl> util = new ExcelUtil<KqBcgl>(KqBcgl.class);
            return util.exportExcel(list, "bcgl");
        }

直接调用若依自带的Excel工具类就可以实现导出。

其中KqBcgl是对应的业务的实体类，可以使用代码生成工具去生成。

在实体类中通过添加注解的方式就能实现将此属性导出，如果不加此注解则不导出

/** 编号 */
        @Excel(name = "编号")
        private String bcbh;

而且注解里面的name属性就是导出时那列的标题。

关于这个注解还有好多个属性，具体可以参考其源码

public @interface Excel
    {
        /**
         * 导出到Excel中的名字.
         */
        public String name() default "";
    
        /**
         * 日期格式, 如: yyyy-MM-dd
         */
        public String dateFormat() default "";
    
        /**
         * 读取内容转表达式(如:0=男,1=女,2=未知)
         */
        public String readConverterExp() default "";
    
        /**
         * 导出类型（0数字 1字符串）
         */
        public ColumnType cellType() default ColumnType.STRING;
    
        /**
         * 导出时在excel中每个列的高度 单位为字符
         */
        public double height() default 14;
    
        /**
         * 导出时在excel中每个列的宽 单位为字符
         */
        public double width() default 16;
    
        /**
         * 文字后缀,如% 90 变成90%
         */
        public String suffix() default "";
    
        /**
         * 当值为空时,字段的默认值
         */
        public String defaultValue() default "";
    
        /**
         * 提示信息
         */
        public String prompt() default "";
    
        /**
         * 设置只能选择不能输入的列内容.
         */
        public String[] combo() default {};
    
        /**
         * 是否导出数据,应对需求:有时我们需要导出一份模板,这是标题需要但内容需要用户手工填写.
         */
        public boolean isExport() default true;
    
        /**
         * 另一个类中的属性名称,支持多级获取,以小数点隔开
         */
        public String targetAttr() default "";
    
        /**
         * 字段类型（0：导出导入；1：仅导出；2：仅导入）
         */
        Type type() default Type.ALL;
    
        public enum Type
        {
            ALL(0), EXPORT(1), IMPORT(2);
            private final int value;
    
            Type(int value)
            {
                this.value = value;
            }
    
            public int value()
            {
                return this.value;
            }
        }
    
        public enum ColumnType
        {
            NUMERIC(0), STRING(1);
            private final int value;
    
            ColumnType(int value)
            {
                this.value = value;
            }
    
            public int value()
            {
                return this.value;
            }
        }
    }

还有一种情况是，在导出前的查询数据的方法，如果调用的是和查询接口一样的方法。

某些属性比如某某状态等需要用到字典表的列。在查询接口可能就是直接查询出来，返回值

直接就是1或者2等这些字典的值。然后返回给前端，前端再进行格式化显示。

但是在导出时必须要显示对应的字典表的label，所以需要修改查询数据的方法getBcListByNameToExport

将要查询的表与字典表相关联，查询出其label值作为对应的属性，如果有多个需要关联字典表的属性，则关联两次，下面是示例代码

<select id="getBcListByNameToExport" parameterType="KqBcgl" resultMap="KqBcglResult">
            SELECT
            b.id,
            b.bcbh,
            b.bcmc,
            s.dict_label AS bclx,
            sfkt,
            b.xss,
            b.jgs,
            b.sfyb,
            kqts,
            b.mzxx,
            b.bz,
            s1.dict_label AS jxbclx
            FROM
            kq_bcgl b
            LEFT JOIN sys_dict_data s ON b.bclx = s.dict_value
            AND s.dict_type = "kq_kqgl_bcgl_bclx"
            LEFT JOIN sys_dict_data s1 ON b.jxbclx = s1.dict_value
            AND s1.dict_type = "kq_kqgl_bcgl_jxbclx"
            <where>
                <if test="bcmc != null  and bcmc != ''"> and bcmc LIKE "%"#{bcmc}"%"</if>
            </where>
        </select>

那么点击导出按钮就能实现导出了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200828142011692.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200828142015774.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200828142257922.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70