使用layui导入excel数据的方法

Kingtogh

已于 2023-02-06 09:26:24 修改

阅读量6.2k

点赞数 6

分类专栏：经验积累文章标签： layui javascript 前端

于 2022-08-31 15:22:40 首次发布

本文链接：https://blog.csdn.net/Kingtogh/article/details/126623867

版权

经验积累专栏收录该内容

7 篇文章 0 订阅

订阅专栏

用layui导入excel数据的方法

操作准备

1、导入对应的Layui文件(Layui.js、Layui.css)、jquery文件（jquery.js）、以及xlsx.core.min.js
路径如下：Layui路径：https://layuion.com/
jquery.js路径：https://cdn.bootcss.com/jquery/3.2.1/jquery.js
xlsx.core.min.js路径：https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js
2、excel文件（该文件的字段需要与你数据库里的字段对应，方便操作）
3、前后端的项目

前端的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel批量处理</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
</head>
<body>
<input type="file" id="export">
<textarea id="area"></textarea>
<script>
    //给input标签绑定change事件，一上传选中的.xls文件就会触发该函数
    $('#export').change(function(e) {
        var files = e.target.files;
        var fileReader = new FileReader();
        fileReader.onload = function(ev) {
            try {
                var data = ev.target.result
                var workbook = XLSX.read(data, {
                    type: 'binary'
                }) // 以二进制流方式读取得到整份excel表格对象
                var persons = []; // 存储获取到的数据
            } catch (e) {
                console.log('文件类型不正确');
                return;
            }
            // 表格的表格范围，可用于判断表头是否数量是否正确
            var fromTo = '';
            // 遍历每张表读取
            for (var sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    fromTo = workbook.Sheets[sheet]['!ref'];
                    console.log(fromTo);
                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    //break; // 如果只取第一张表，就取消注释这行
                }
            }
            //在控制台打印出来表格中的数据
            console.log(persons);
            $("#area").val(JSON.stringify(persons));
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    });
</script>
</body>
</html>

这一部分的前端代码主要是通过读取.XLSX文件的内容并将结果存储到persons[ ]中，然后我们返回给后端的时候只需要将该数组传到后端即可。

ajax请求（将前台存储的数组传递给后端并调用后端的接口）

$.ajax({
                            url: 你自己的接口地址,
                            async: false,
                            type: 你接口的请求方式,
                            dataType: 'JSON',
                            contentType: 'application/json',
                            data: JSON.stringify({
                                persons: JSON.stringify(persons)
                            }),
                            success: function (data) {
                                if (data.code == "200") {
                                    layer.alert(data.msg);
                                    layer.close();
                                    queryList();
                                } else {
                                    layer.alert(data.msg);
                                }
                            }
                        });
                        }else {
                            layer.alert("数据表格为空！");
                        }
                    };

后端代码（以controller层对数据处理和impl层循环插入数据为主，其他层与正常写法无异）

controller层

    public Array<UserInfor> importConf(@RequestBody Map<String, Object> map) {
        String list =  map.get("persons").toString().trim();
        List<JSON> persons = (List<JSON>) JSON.parseObject(list, List.class);
        Integer integer = userInfoService.importUser(persons);
        if (integer == persons.size()) {
            return Array.success("导入数据表成功！");
        }
        return Array.error("导入数据表失败！");
    }

感谢噎苏的提问，补充一下Array这个类的实现

import lombok.AllArgsConstructor;
import lombok.Data;

import java.io.Serializable;

// 使用Lombok为我们添加Getter和Setter
@Data
// 使用Lombok为我们添加全参构造器
@AllArgsConstructor
public class R<T> implements Serializable {
    // 返回码
    private int code;

    // 返回信息
    private String msg;

    // 返回数据
    private T data;

    // 构建成功返回
    public static <E> R<E> success(E data) {
        return new R<E>(200, null, data);
    }

    // 构建失败返回
    public static <E> R<E> error(String msg) {
        return new R<E>(500, msg, null);
    }

    // 返回是否是成功（code为200）
    public boolean isSuccess() {
        return this.code == 200;
    }

    // 返回是否是失败（code为500）
    public boolean isError() {
        return this.code != 200;
    }
}

impl层（其中JSON需要导入的是com.alibaba.fastjson.JSON）

public Integer importUserInfo(List<JSON> persons) {
        int i ;
        int importUserInfo=0;
        for (i=0; i<persons.size();i++){
            UserInfor person = JSON.toJavaObject(persons.get(i), UserInfor.class);
      
        importUser += userMapper.insert(person);
        }
        return importUser;
    }

补充：如果嫌弃input框中的默认文字，可改用button按钮来作为事件的触发按钮，只需要button上加入 οnclick="$(‘#input框的id’).click()"并将input框的display设置为none,即可将input框的触发事件换为点击button来触发。

<button class="layui-btn-normal" id="import" onclick="$('#import').click()"><i class="layui-icon">&#xe681;</i>导入</button>
<input type="file"  id="import" lay-event="import" style="display: none;"></input>