Jquery使用xlsx实现批量导入Excel数据

Song26 次浏览0个评论2025年05月12日

系统中支持Excel导入数据功能,但是最近经常出现服务器卡死的情况;初步怀疑是客户导入Excel数据过大导致的;所以更改处理数据模式,将数据处理交个客户本地的电脑;服务器仅仅处理插入数据即可。流程大概为:

  • 客户选择Excel数据表;
  • JS本地读取Excel表数据大小和格式,过大或不符合直接拦截返回;
  • 处理数据进行分批处理,每100条数据保存一次;
  • AJAX调用后端保存数据

具体代码如下:

function arraysEqualIgnoreOrder(arr1, arr2) {
    if (arr1.length !== arr2.length) return false;
    const bCopy = [...arr2];
    return arr1.every(item => {
        const index = bCopy.indexOf(item);
        if (index === -1) return false;
        bCopy.splice(index, 1); // 防止重复匹配
        return true;
    });
}

function activitySeatBatchImport(){
    const fileInput = document.getElementById('importExcel');
    const file = fileInput.files[0];
    if (!file) {
        alert("请上传Excel文件");
        return;
    }
    console.log("数据导入中请稍等...");
    const reader = new FileReader();

    reader.onload = function (event) {
        try {
            const data = new Uint8Array(event.target.result);
            const workbook = XLSX.read(data, { type: 'array' });

            // 获取第一个工作表
            const sheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[sheetName];

            // 转为 JSON 格式
            const jsonData = XLSX.utils.sheet_to_json(worksheet,{"header":1});

            console.log(jsonData[0]);
            console.log(jsonData);
            // 限制单次导入数据上限
            if (jsonData.length > 1001) {
                alert("单次导入数据不可超过1000,当前为"+jsonData.length);
                return;
            }

            if (jsonData.length < 2) {
                alert("表中暂无数据,请添加数据!");
                return;
            }

            // 校验表头是否正确
            const headerCheck = arraysEqualIgnoreOrder(jsonData[0],["姓名", "电话/邀请码", "座位号", "晚餐桌号", "更多座位信息"]);
            if (!headerCheck) {
                alert("Excel格式不正确,请不要修改模板表头格式");
                return;
            }

            // 校验数据是否正确,仅校验了第一项
            if (jsonData[1][0] == "" && jsonData[1][1] == "") {
                alert("姓名和电话不能同时为空!");
                return;
            }
            if (jsonData[1][2] == "" && jsonData[1][3] == "" && jsonData[1][4] == "") {
                alert("座位号/晚餐桌号/更多座位信息不能同时为空!");
                return;
            }

            let batchData = [];
            let batchNum = 0;
            for (let i = 1; i < jsonData.length; i++) {
                let row = jsonData[i];
                // 移除空格
                let trimmedRow = {};
                for (let key in row) {
                    if (row.hasOwnProperty(key)) {
                        // 如果值是字符串类型,则使用 trim() 方法去除空格
                        if (typeof row[key] === 'string') {
                            trimmedRow[key] = row[key].replace(/\s+/g, '');
                        } else {
                            // 如果不是字符串类型,则直接赋值
                            trimmedRow[key] = row[key];
                        }
                    }
                }
                batchData.push(trimmedRow);
                batchNum += 1;
                if (batchNum == 100) {
                    // 处理AJAX插入数据
                    console.log(batchData);
                    batchNum = 0;
                    batchData = [];
                }
            }
        } catch (e) {
            alert("上传Excel失败,"+e);
        }
    };

    reader.onerror = function (event) {
        alert("读取Excel失败,"+event.target.error);
    };

    reader.readAsArrayBuffer(file);
}


更多相关好文