前端表格复制粘贴自动根据标识进行填充
这个需求是公司之前打算开发的一个项目需要，后面公司并没有开始这个项目，但是我之前稍微弄了一点，所以也在此记录吧。需求是需要在 wps 或者 excel 的表格中复制一个表格，然后在前端的表格中自动根据 姓名 去进行填充，下面我来演示一下功能。
wps 的表格：
前端表格：
我们把刚刚从 wps 复制的表格 到我们前端的表格 进行 粘贴：
来大概说一下过程，提供思路，不过代码是之前写的了，只能说个大概
使用的前段表格控件是 lucksheet，官网地址： Luckysheet 已不再维护，推荐使用 Univer 替代 | Luckysheet文档
lucksheet 给我们提供了一个配置 rangePasteBefore，可以进行选区操作
我的思路就是可以获取到需要粘贴的数据，然后又可以获取到表格的数据，对比两份数据，找到 姓名 那一行，进行处理，处理完之后再填充到前端表格
下面来看一下我的代码，注意，代码中已经写了必需是根据 姓名来匹配数据，需要根据其他的，你们自己调整，在我的代码中会报错，我没有继续研究这个东西了，所以没有处理。
里面会用到 lucksheet 的依赖，这是我上传的依赖地址 ，解压后和代码文件放在同级目录下就可以https://download.csdn.net/download/lotpyve/89942368
或者你们可以看官网的，用官网上面的，主要是 rangePasteBefore 方法里面的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./dist/plugins/css/pluginsCss.css" />
<link rel="stylesheet" href="./dist/plugins/plugins.css" />
<link rel="stylesheet" href="./dist/css/luckysheet.css" />
<link rel="stylesheet" href="./dist/assets/iconfont/iconfont.css" />
<script src="./dist/plugins/js/plugin.js"></script>
<script src="./dist/luckysheet.umd.js"></script>
<style>
.ipt {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
</style>
</head>
<body>
<input class="ipt" type="file" />
<div id="luckysheet" style="
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
"></div>
<script>
$(function () {
//配置项
var options = {
container: "luckysheet", //luckysheet为容器id
title: "表格的名字", // 设定表格名称
lang: "zh", // 设定表格语言
allowCopy: false, // 是否可复制
showtoolbarConfig: {
// undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
// paintFormat: false, //格式刷
// currencyFormat: false, //货币格式
// percentageFormat: false, //百分比格式
// numberDecrease: false, // '减少小数位数'
// numberIncrease: false, // '增加小数位数
// moreFormats: false, // '更多格式'
// font: false, // '字体'
// fontSize: false, // '字号大小'
// bold: false, // '粗体 (Ctrl+B)'
// italic: false, // '斜体 (Ctrl+I)'
// strikethrough: false, // '删除线 (Alt+Shift+5)'
// underline: false, // '下划线 (Alt+Shift+6)'
// textColor: false, // '文本颜色'
// fillColor: false, // '单元格颜色'
// border: false, // '边框'
// mergeCell: false, // '合并单元格'
// horizontalAlignMode: false, // '水平对齐方式'
// verticalAlignMode: false, // '垂直对齐方式'
// textWrapMode: false, // '换行方式'
// textRotateMode: false, // '文本旋转方式'
// image: false, // '插入图片'
// link: false, // '插入链接'
// chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
// postil: false, //'批注'
// pivotTable: false, //'数据透视表'
// function: false, // '公式'
// frozenMode: false, // '冻结方式'
// sortAndFilter: false, // '排序和筛选'
// conditionalFormat: false, // '条件格式'
// dataVerification: false, // '数据验证'
// splitColumn: false, // '分列'
// screenshot: false, // '截图'
// findAndReplace: false, // '查找替换'
// protection: false, // '工作表保护'
// print: false, // '打印'
},
showsheetbarConfig: {
// add: false, //新增sheet
// menu: false, //sheet管理菜单
// sheet: false, //sheet页显示
},
showstatisticBar: false,
showstatisticBarConfig: {
zoom: true,
},
sheetRightClickConfig: {
delete: false, // 删除
copy: false, // 复制
rename: false, //重命名
color: false, //更改颜色
hide: false, //隐藏，取消隐藏
move: false, //向左移，向右移
},
rowHeaderWidth: 88,
pager: {
pageIndex: 1, //当前的页码
pageSize: 10, //每页显示多少行数据
total: 50, //数据总行数
selectOption: [10, 20], //允许设置每页行数的选项
},
cellUpdateBefore(r, c) {
console.log(r, c, "rc");
},
hook: {
rangePasteBefore: function (range, data) {
console.info("range", range);
// console.info("data", data);
// console.log("range", range);
// console.log("data", data);
// console.log(
// luckysheet.getAllSheets()[0],
// "luckysheet.getAllSheets()[0]"
// );
const originArr = luckysheet.getSheetData();
// console.log(originArr, "getSheetData");
// 创建一个虚拟的DOM元素，加载HTML内容
// #region
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(data, "text/html");
// 获取包含表格数据的table元素
const table = htmlDoc.querySelector("table");
// 初始化空数组用于存储提取的数据
const arr = [];
// 遍历表格的每一行
table.querySelectorAll("tr").forEach((row) => {
const rowData = [];
// 遍历当前行的每个单元格
row.querySelectorAll("td").forEach((cell) => {
// 提取单元格的文本内容并添加到当前行数据中
rowData.push(cell.textContent.trim());
});
// 将当前行数据添加到数组中
arr.push(rowData);
});
// // 输出提取的数组
// console.log(arr, "arr");
// //#endregion
function findMatches(arr, originArr) {
// 初始化结果数组
let mateArr = [];
// 获取表头，即arr的第一行数据
let headers = arr[0];
// 获取两张表的姓名所在索引
let arrNameIndex = headers.findIndex((el) => el === "姓名");
let originArrNameIndex = originArr[0].findIndex(
(el) => el.v === "姓名"
);
// 遍历arr中除表头外的每一行
for (let i = 1; i < arr.length; i++) {
// 遍历每一列
for (let j = 0; j < arr[i].length; j++) {
// 获取当前单元格的值
let cellValue = arr[i][j];
// 查找在originArr中对应的行索引
let rowIndex = originArr.findIndex(
(obj) =>
obj &&
obj[originArrNameIndex].v === arr[i][arrNameIndex]
);
// 查找在originArr中对应的列索引
let columnIndex = originArr[0].findIndex(
(obj) => obj && obj.v === headers[j]
);
// 如果找到对应的列
if (columnIndex !== -1 && rowIndex !== -1) {
// 将行索引、列索引和单元格值添加到结果数组
mateArr.push([rowIndex, columnIndex, cellValue]);
}
}
}
return mateArr;
}
// 使用示例
const mateArr = findMatches(arr, originArr);
// console.log(mateArr, "mateArr");
mateArr.forEach((el, index) => {
luckysheet.setCellValue(el[0], el[1], el[2]);
});
// luckysheet.setCellValue(48, 2, "有值了吗");
return false; //Can intercept paste
},
},
};
luckysheet.create(options);
// console.log(luckysheet.luckysheetfile[0].data, "luckysheetfile");
console.log(luckysheet.getCellValue(0, 0), "123");
// window.luckysheet.setCellValue(0, 0, "有值了吗");
// setTimeout(() => {
// luckysheet.setCellValue(0, 0, "有值了吗");
// console.log(
// luckysheet.getAllSheets()[0],
// "luckysheet.getAllSheets()[0]"
// );
// }, 2000);
});
</script>
</body>
</html>