将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…

服务器是一种高性能计算机

服务器是一种高性能计算机&#xff0c;专门设计用于在网络中提供各种服务。它们通常具备比普通计算机更快的CPU运算能力、更可靠的运行性能、更大的I/O外部数据吞吐能力以及更好的扩展性。

java中方法引用

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

详解Spring支持的几种注入方式

在 Spring 框架中&#xff0c;Bean 的注入方式主要有以下几种&#xff0c;其中一些是自动注入的。以下是详细说明&#xff1a; 1. 构造函数注入 (Constructor Injection) 自动注入&#xff1a;使用 Autowired 注解时&#xff0c;Spring 容器会自动调用带有 Autowired 注解的构…

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

随着时代的快速开展&#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、…

Docker大学生看了都会系列(三、常用帮助、镜像、容器命令)

系列文章目录 第一章 Docker介绍 第二章 2.1 Mac通过Homebrew安装Docker 第二章 2.2 CentOS安装Docker 第三章 Docker常用命令 文章目录 前言环境常用命令帮助命令镜像命令容器命令 总结 前言 前面2章学完了基础概念&#xff0c;实操安装使用。接下来了解一些日常中常用的命令…

Java - 随机存取文件类

在Java中&#xff0c;随机存取文件&#xff08;Random Access File&#xff09;通常使用java.io.RandomAccessFile类来实现。这个类允许你读取和写入文件的任意位置&#xff0c;而不是像FileReader和FileWriter那样只能从头开始或追加到文件末尾。 RandomAccessFile类提供了用…

容器化部署fastdfs文件存储

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

速盾:cdn技术详解

CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;是一种基于分布式架构的网络技术&#xff0c;通过将内容缓存到离用户较近的服务器上&#xff0c;从而提升网站的访问速度和可靠性。本文将详细介绍CDN技术的原理和工作流程。 CDN技术的原理是将网…

h5相机功能

h5相机功能 利用vant input file <template><div class"mb10"><divv-for"(item, index) in info.imgList":key"index"class"imgItem f32 mr20"click"preview(item, index)"><img :src"doFileUrl…

<sa8650>QCX Usecase 使用详解—如何在管道中添加多个 IPE 实例

<sa8650>QCX Usecase 使用详解—如何在管道中添加多个 IPE 实例 一、前言二、UsecaseSRV添加新格式三、更新usecase.xml四、定义 IPE 的新实例五、添加新链接六、QCarcam测试XML一、前言 本节说明在使用Usecase/Pipeline XML 中添加多个 IPE 实例所需的更改。以下示例解释了…

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

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

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

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

golang调用外部程序包os/exec中的 Command和CommandContext 函数创建的Cmd对象的区别

在go语言中&#xff0c;我们可以通过os/exec包中的Command和CommandContext 函数创建对应的外部程序执行Cmd对象&#xff0c; 这2个函数创建的cmd命令执行对象是有区别的&#xff0c;CommandContext创建的对象可以携带上下文&#xff0c;这个主要用于我们通过cancel函数给对应的…

37【透视】两点透视

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

【Binaryen】partiallyPrecompute函数梳理

在Binaryen中有一个优化名为Precompute&#xff0c;作用是进行一些提前计算&#xff0c;类似于LLVM中的常量折叠类似的操作。 涉及的提交文件在此。 首先放一下全部的代码&#xff1a; // To partially precompute selects we walk up the stack from them, like this://// …

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

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