前端表格复制粘贴主动根据标识举行添补

这个需求是公司之前筹划开发的一个项目须要，背面公司并没有开始这个项目，但是我之前稍微弄了一点，以是也在此记载吧。需求是须要在 wps 大概 excel 的表格中复制一个表格，然后在前端的表格中主动根据 姓名 去举行添补，下面我来演示一下功能。
wps 的表格：

前端表格：

我们把刚刚从 wps 复制的表格 到我们前端的表格 举行 粘贴：

来大概说一下过程，提供思绪，不外代码是之前写的了，只能说个大概
利用的前段表格控件是 lucksheet，官网地点： Luckysheet 已不再维护，保举利用 Univer 更换 | Luckysheet文档
lucksheet 给我们提供了一个设置 rangePasteBefore，可以举行选区利用

我的思绪就是可以获取到须要粘贴的数据，然后又可以获取到表格的数据，对比两份数据，找到 姓名 那一行，举行处理处罚，处理处罚完之后再添补到前端表格
下面来看一下我的代码，留意，代码中已经写了必须是根据 姓名来匹配数据，须要根据其他的，你们本身调解，在我的代码中会报错，我没有继续研究这个东西了，以是没有处理处罚。
内里会用到 lucksheet 的依赖，这是我上传的依赖地点 ，解压后和代码文件放在同级目次下就可以
大概你们可以看官网的，用官网上面的，重要是 rangePasteBefore 方法内里的内容

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <meta charset="UTF-8" />
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7.   <title>Document</title>
8.   <link rel="stylesheet" href="./dist/plugins/css/pluginsCss.css" />
9.   <link rel="stylesheet" href="./dist/plugins/plugins.css" />
10.   <link rel="stylesheet" href="./dist/css/luckysheet.css" />
11.   <link rel="stylesheet" href="./dist/assets/iconfont/iconfont.css" />
12.   <script src="./dist/plugins/js/plugin.js"></script>
13.   <script src="./dist/luckysheet.umd.js"></script>
14.   <style>
15.     .ipt {
16.       position: absolute;
17.       top: 0;
18.       left: 0;
19.       z-index: 10;
20.     }
21.   </style>
22. </head>
24. <body>
25.   <input class="ipt" type="file" />
26.   <div id="luckysheet" style="
27.         margin: 0px;
28.         padding: 0px;
29.         position: absolute;
30.         width: 100%;
31.         height: 100%;
32.         left: 0px;
33.         top: 0px;
34.       "></div>
35.   <script>
36.     $(function () {
37.       //配置项
38.       var options = {
39.         container: "luckysheet", //luckysheet为容器id
40.         title: "表格的名字", // 设定表格名称
41.         lang: "zh", // 设定表格语言
42.         allowCopy: false, // 是否可复制
43.         showtoolbarConfig: {
44.           // undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
45.           // paintFormat: false, //格式刷
46.           // currencyFormat: false, //货币格式
47.           // percentageFormat: false, //百分比格式
48.           // numberDecrease: false, // '减少小数位数'
49.           // numberIncrease: false, // '增加小数位数
50.           // moreFormats: false, // '更多格式'
51.           // font: false, // '字体'
52.           // fontSize: false, // '字号大小'
53.           // bold: false, // '粗体 (Ctrl+B)'
54.           // italic: false, // '斜体 (Ctrl+I)'
55.           // strikethrough: false, // '删除线 (Alt+Shift+5)'
56.           // underline: false, // '下划线 (Alt+Shift+6)'
57.           // textColor: false, // '文本颜色'
58.           // fillColor: false, // '单元格颜色'
59.           // border: false, // '边框'
60.           // mergeCell: false, // '合并单元格'
61.           // horizontalAlignMode: false, // '水平对齐方式'
62.           // verticalAlignMode: false, // '垂直对齐方式'
63.           // textWrapMode: false, // '换行方式'
64.           // textRotateMode: false, // '文本旋转方式'
65.           // image: false, // '插入图片'
66.           // link: false, // '插入链接'
67.           // chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
68.           // postil: false, //'批注'
69.           // pivotTable: false, //'数据透视表'
70.           // function: false, // '公式'
71.           // frozenMode: false, // '冻结方式'
72.           // sortAndFilter: false, // '排序和筛选'
73.           // conditionalFormat: false, // '条件格式'
74.           // dataVerification: false, // '数据验证'
75.           // splitColumn: false, // '分列'
76.           // screenshot: false, // '截图'
77.           // findAndReplace: false, // '查找替换'
78.           // protection: false, // '工作表保护'
79.           // print: false, // '打印'
80.         },
81.         showsheetbarConfig: {
82.           // add: false, //新增sheet
83.           // menu: false, //sheet管理菜单
84.           // sheet: false, //sheet页显示
85.         },
86.         showstatisticBar: false,
87.         showstatisticBarConfig: {
88.           zoom: true,
89.         },
90.         sheetRightClickConfig: {
91.           delete: false, // 删除
92.           copy: false, // 复制
93.           rename: false, //重命名
94.           color: false, //更改颜色
95.           hide: false, //隐藏，取消隐藏
96.           move: false, //向左移，向右移
97.         },
98.         rowHeaderWidth: 88,
99.         pager: {
100.           pageIndex: 1, //当前的页码
101.           pageSize: 10, //每页显示多少行数据
102.           total: 50, //数据总行数
103.           selectOption: [10, 20], //允许设置每页行数的选项
104.         },
105.         cellUpdateBefore(r, c) {
106.           console.log(r, c, "rc");
107.         },
108.         hook: {
109.           rangePasteBefore: function (range, data) {
110.             console.info("range", range);
111.             // console.info("data", data);
112.             // console.log("range", range);
113.             // console.log("data", data);
114.             // console.log(
115.             //   luckysheet.getAllSheets()[0],
116.             //   "luckysheet.getAllSheets()[0]"
117.             // );
118.             const originArr = luckysheet.getSheetData();
119.             // console.log(originArr, "getSheetData");
120.             // 创建一个虚拟的DOM元素，加载HTML内容
121.             // #region
122.             const parser = new DOMParser();
123.             const htmlDoc = parser.parseFromString(data, "text/html");
124.             // 获取包含表格数据的table元素
125.             const table = htmlDoc.querySelector("table");
126.             // 初始化空数组用于存储提取的数据
127.             const arr = [];
128.             // 遍历表格的每一行
129.             table.querySelectorAll("tr").forEach((row) => {
130.               const rowData = [];
131.               // 遍历当前行的每个单元格
132.               row.querySelectorAll("td").forEach((cell) => {
133.                 // 提取单元格的文本内容并添加到当前行数据中
134.                 rowData.push(cell.textContent.trim());
135.               });
136.               // 将当前行数据添加到数组中
137.               arr.push(rowData);
138.             });
139.             // // 输出提取的数组
140.             // console.log(arr, "arr");
141.             // //#endregion
143.             function findMatches(arr, originArr) {
144.               // 初始化结果数组
145.               let mateArr = [];
147.               // 获取表头，即arr的第一行数据
148.               let headers = arr[0];
150.               // 获取两张表的姓名所在索引
151.               let arrNameIndex = headers.findIndex((el) => el === "姓名");
152.               let originArrNameIndex = originArr[0].findIndex(
153.                 (el) => el.v === "姓名"
154.               );
156.               // 遍历arr中除表头外的每一行
157.               for (let i = 1; i < arr.length; i++) {
158.                 // 遍历每一列
159.                 for (let j = 0; j < arr[i].length; j++) {
160.                   // 获取当前单元格的值
161.                   let cellValue = arr[i][j];
162.                   // 查找在originArr中对应的行索引
164.                   let rowIndex = originArr.findIndex(
165.                     (obj) =>
166.                       obj &&
167.                       obj[originArrNameIndex].v === arr[i][arrNameIndex]
168.                   );
169.                   // 查找在originArr中对应的列索引
170.                   let columnIndex = originArr[0].findIndex(
171.                     (obj) => obj && obj.v === headers[j]
172.                   );
174.                   // 如果找到对应的列
175.                   if (columnIndex !== -1 && rowIndex !== -1) {
176.                     // 将行索引、列索引和单元格值添加到结果数组
177.                     mateArr.push([rowIndex, columnIndex, cellValue]);
178.                   }
179.                 }
180.               }
182.               return mateArr;
183.             }
185.             // 使用示例
186.             const mateArr = findMatches(arr, originArr);
187.             // console.log(mateArr, "mateArr");
188.             mateArr.forEach((el, index) => {
189.               luckysheet.setCellValue(el[0], el[1], el[2]);
190.             });
191.             // luckysheet.setCellValue(48, 2, "有值了吗");
192.             return false; //Can intercept paste
193.           },
194.         },
195.       };
196.       luckysheet.create(options);
198.       // console.log(luckysheet.luckysheetfile[0].data, "luckysheetfile");
199.       console.log(luckysheet.getCellValue(0, 0), "123");
200.       // window.luckysheet.setCellValue(0, 0, "有值了吗");
201.       // setTimeout(() => {
202.       //   luckysheet.setCellValue(0, 0, "有值了吗");
203.       //   console.log(
204.       //     luckysheet.getAllSheets()[0],
205.       //     "luckysheet.getAllSheets()[0]"
206.       //   );
207.       // }, 2000);
208.     });
209.   </script>
210. </body>
212. </html>

复制代码