Jquery使用xlsx实现批量导入Excel数据
Song •
26 次浏览 •
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);
}
更多相关好文
-
laravel中distinct()的使用方法与去重 2017-09-11
-
Laravel将view缓存为静态html,laravel页面静态缓存 2021-10-09
-
[ laravel爬虫实战--基础篇 ] guzzle描述与安装 2017-11-01
-
[ 配置教程 ] 在ubuntu16.04中部署LNMP环境(php7+maridb且开启maridb远程以及nginx多域名访问 )并配置laravel环境 2017-07-18
-
Jquery使用xlsx实现批量导入Excel数据 2025-05-12
热门文章
-
Jquery使用xlsx实现批量导入Excel数据 2025-05-12
-
laravel11如何启用routes/api.php无状态路由 2025-03-06
-
oppo手机默认浏览器urlscheme 2025-02-13
-
mysql如何给运营人员添加只有查询权限的账号 2024-12-02
-
Mac 安装mysql并且配置密码 2024-11-20
electron安装使用better-sqlite3并解决NODE_MODULE_VERSION xxx. This version of Node.js requires