将HTML页面中的table表格元素转换为矩形,计算出每个单元格的宽高以及左上角坐标点,输出为json数据

export function huoQuTableElement() {const tableData = []; // 存储表格数据的数组let res = [];// 获取到包含表格的foreignObject元素const foreignObject = document.getElementById('mydctable');if (!foreignObject){return '';}// 获取到表格元素let oldTable = foreignObject.querySelector('table');if (!oldTable){return '';}// 复制表格元素let newTable = oldTable.cloneNode(true);// 将新表格添加到页面中foreignObject.appendChild(newTable);//以下方法将合并后的表格还原为未合并的状态let rows = newTable.rows;for (let i = 0; i < rows.length; i++) {let cells = rows[i].cells;for (let j = 0; j < cells.length; j++) {let cell = cells[j];let rowspan = cell.getAttribute('rowspan');let colspan = cell.getAttribute('colspan');let scope = cell.getAttribute('scope');if (rowspan === null){rowspan = 1}cell.setAttribute('data-original-rowspan', rowspan); // 存储原始的 rowspan 值if (rowspan && parseInt(rowspan) > 1) {let copyContent = cell.innerHTML; // 保存当前单元格的内容for (let k = 1; k < parseInt(rowspan); k++) {let nextRow = rows[i + k];if (nextRow) {if (nextRow && j >= 0 && j < nextRow.cells.length) {let nextCell = nextRow.insertCell(j);nextCell.innerHTML = copyContent; // 复制内容到被合并的位置if (colspan) {nextCell.colSpan = parseInt(colspan); // 添加colspan属性}if (scope) {nextCell.scope = scope; // 添加scope属性}nextCell.style.color = 'white'; // 设置文字颜色为白色nextCell.style.border = '1px solid white'; // 设置表格边框为白色nextCell.setAttribute('data-remove', true); //标记为合并单元格,计算时需要删除}}}cell.removeAttribute('rowspan');cell.innerHTML = copyContent; // 在当前单元格复制内容if (colspan) {cell.colSpan = parseInt(colspan); // 添加colspan属性}if (scope) {cell.scope = scope; // 添加scope属性}}}}//以下方法获取到每个单元格的坐标点和宽高let cells = newTable.querySelectorAll('td, th');// 设置固定的参考点坐标let referenceX = 100; // 参考点的横坐标let referenceY = 100; // 参考点的纵坐标cells.forEach(cell => {let cellText = cell.textContent.trim(); // 单元格内容let cellRect = cell.getBoundingClientRect(); // 单元格位置信息let rowspan = cell.getAttribute('data-original-rowspan'); // 单元格合并信息let dataRemove = cell.getAttribute('data-remove');// 计算单元格左上角坐标相对于固定参考点的偏移量并四舍五入为整数let offsetX = Math.round(cellRect.left - referenceX);let offsetY = Math.round(cellRect.top - referenceY);// 封装单元格数据为 JSON 对象if (rowspan == null || rowspan === 'null' || rowspan === '' || rowspan === undefined){rowspan = 1}if (!dataRemove){let cellData = {content: cellText,rowspan: parseInt(rowspan),x: offsetX,y: offsetY + (Math.round(cellRect.height) * (parseInt(rowspan)-1)),width: Math.round(cellRect.width),height: Math.round(cellRect.height) * parseInt(rowspan)};tableData.push(cellData); // 将单元格数据添加到数组}});const jsonData = JSON.stringify({ rects: tableData });res.push(JSON.parse(jsonData))console.log(res)return res;
}

最后输出的格式如下所示:content是单元格的文字内容。x和y是单元格左上角的坐标点,width和height是单元格的宽高。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nativefier : 将网址打包成exe桌面程序

1、需求场景 在日常开发中&#xff0c;需要针对一些网页在一体机上使用&#xff0c;同时在浏览器上也可以使用&#xff0c;这里推荐大家用nativefier&#xff0c;对网址进行打包。以下是nativefier安装命令&#xff1a; npm install nativefier -g 2、使用方法 --arch 系统 …

《混凝土坝监测仪器系列型谱》修订中监测仪器分类方案解读

随着科技的不断进步和监测需求的日益增加&#xff0c;对监测仪器分类方案进行修订已成为必然的趋势。本文旨在探讨《混凝土坝监测仪器系列型谱》中对现有仪器分类方式的修订&#xff0c;以及监测仪器选用的相关内容。希望对大家中有所帮助&#xff1a; 一、取消过时条目&#x…

java中方法引用

目录 方法引用&#xff1a; 引用静态方法 引用成员方法 引用构造方法 使用类名引用成员方法 引用数组的构造方法 练习 方法引用&#xff1a; 把已经有的方法拿过来用&#xff0c;当做函数式接口中抽象方法的方法体 在Java中&#xff0c;方法引用是一种简化Lambda表达式的…

教务管理系统-学员办理体系介绍

随着时代的快速开展&#xff0c;教育方面也没落下&#xff0c;不仅是线下线上都呈现许多训练校园&#xff0c;办理软件也顺势而为的呈现广阔训练校园面前&#xff0c;许多的校园和训练组织也都在运用教务管理系统了。运用教务管理系统里边的学员办理体系可以让相应的办理人员更…

Redis的一致性

一、产生的原因 使用缓存&#xff0c;在进行写操作的时候就会出现不一致的问题。 一致性分为三类&#xff1a;强一致性&#xff0c;弱一致性&#xff0c;最终一致性 二、方案 2.1 延时双删 在更新数据库的操作前后分别进行一次删除缓存的操作&#xff0c;并在更新数据库之后…

《HelloGitHub》第 98 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、…

容器化部署fastdfs文件存储

目录 一、软件信息 二、构建fastdfs镜像 三、docker 启动fdfs服务 四、k8s部署fdfs服务 1、fdfs部署文件 五、外部服务访问 一、软件信息 fastdfs版本&#xff1a;fastdfs:V5.11 libfastcommon版本: V1.0.36 fastdfs-nginx-module版本&#xff1a;V1.20 nginx版本&…

使用Spring Boot和MybatisPlus的Java CRM客户关系管理系统源码

项目名称&#xff1a;CRM客户关系管理系统 功能模块及描述&#xff1a; 一、待办事项 今日需联系客户&#xff1a;显示当日需跟进的客户列表&#xff0c;支持查询和筛选。 分配给我的线索&#xff1a;管理分配给用户的线索&#xff0c;包括线索列表和查询功能。 分配给我的客…

导弹研究中常用坐标系及坐标系之间的变换

在导弹飞行控制过程中&#xff0c;需要时刻掌握导弹的飞行状态 &#xff08;速度、位置、姿态角等&#xff09;&#xff0c;这就有赖于描述导弹飞行状态的坐标系。除了大地坐标系和地心大地直角坐标系外&#xff0c;导弹常用的坐标系还有很多&#xff0c;合理而恰当地选择参考系…

37【透视】两点透视

1 两点透视比较合适表现物体的结构 用两点透视绘制比较小的、箱子之类的物体 2 一点透视和两点透视的共存关系

vs - vs2013/vs2019工程文件的区别

文章目录 vs - vs2013/vs2019工程文件的区别概述笔记sln文件的区别VisualStudioVersion vcxproj文件的区别ToolsVersionPlatformToolset 备注更方便的方法END vs - vs2013/vs2019工程文件的区别 概述 为了避免安装UCRT的问题&#xff0c;想将手头的vs2019工程降级为vs2013工程…

解决Mac ~/.bash_profile 配置的环境变量重启终端后失效问题

在Mac系统中&#xff0c;配置环境变量通常是在~/.bash_profile文件中进行。然而&#xff0c;有时会遇到配置的环境变量在重启终端后失效的问题。 解决办法&#xff1a; 在~/.zshrc文件最后或最前面&#xff0c;增加一行 source ~/.bash_profile

SARscape雷达图像处理软件简介

合成孔径雷达&#xff08;SAR&#xff09;拥有独特的技术魅力和优势&#xff0c;渐成为国际上的研究热点之一&#xff0c;其应用领域越来越广泛。SAR数据可以全天候对研究区域进行量测、分析以及获取目标信息。高级雷达图像处理工具SARscape&#xff0c;能让您轻松将原始SAR数据…

Leetcode 第 131 场双周赛题解

Leetcode 第 131 场双周赛题解 Leetcode 第 131 场双周赛题解题目1&#xff1a;3158. 求出出现两次数字的 XOR 值思路代码复杂度分析 题目2&#xff1a;3159. 查询数组中元素的出现位置思路代码复杂度分析 题目3&#xff1a;3160. 所有球里面不同颜色的数目思路代码复杂度分析 …

AI 时代,产品经理该如何进化

前言 传统的互联网业务或者游戏业务&#xff0c;产品或者业务输出需求&#xff0c;技术人员只需要指哪打哪就好了。而人工智能发展到当下这个尴尬的阶段&#xff0c;仿佛它能干很多事&#xff0c;但是真把它往业务里搁就发现&#xff0c;这个叛逆的小东西不一定胜任的了这些有…

AI大模型学习笔记之四:生成式人工智能是如何工作的?

OpenAI 发布 ChatGPT 已经1年多了&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;也已经广为人知&#xff0c;我们常常津津乐道于 ChatGPT 和 Claude 这样的人工智能系统能够神奇地生成文本与我们对话&#xff0c;并且能够记忆上下文情境。 GPT-4多模态分析对话 Midj…

数字机顶盒、显示器方案DCDC芯片OC5816 2A,18V同步降压DC-DC

概述 OC5816 是一款 2A 的高集成度、高效率同步整流降压转换器。在一个相当宽的输出电流负载范围内&#xff0c;OC5816 可以高效工作。 OC5816 的两种工作模式&#xff0c;固定频率PWM 峰值电流控制和轻载 PFM 开关模式&#xff0c;允许系统高效工作在一个相当宽的输出电流…

i 人 聊 天 手 册(e人禁止入内)

在之前的读书笔记-《蔡康永的说话之道》中&#xff0c;作者给大家分享了很多具体的要点&#xff0c;其更偏向于战术层面&#xff0c;我更想要的是一个类似聊天手册的东西&#xff0c;就让我自己来总结下吧。 虽然在 MBTI 中&#xff0c;按照获取能量的方式定义了 i 人、e 人&a…

【面试干货】如何选择MySQL数据库存储引擎(MyISAM 或 InnoDB)

【面试干货】如何选择MySQL数据库存储引擎(MyISAM 或 InnoDB&#xff09; &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; MySQL数据库存储引擎是一个 关键 的考虑因素。MySQL提供了多种存储引擎&#xff0c;其中最常用的是 MyISAM 和 InnoD…

攻防世界---misc---a_good_idea

1、下载附件得到一张图片&#xff0c;winhex分析&#xff0c;发现有压缩包 2、在kali中用普通用户对jpg进行binwalk 3、得到两张图片和一个文本&#xff0c;查看文本信息&#xff1a;提示试着找到像素的秘密 4、提到像素就想到了Stegsolve这个工具&#xff0c;将这两张图片用该…