将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是单元格的宽高。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Orange AIpro开箱上手

0.介绍 首先感谢官方给到机会&#xff0c;有幸参加这次活动。 OrangePi AIpro(8T)采用昇腾AI技术路线&#xff0c;具体为4核64位处理器AI处理器&#xff0c;集成图形处理器&#xff0c;支持8TOPS AI算力&#xff0c;拥有8GB/16GB LPDDR4X&#xff0c;可以外接32GB/64GB/128GB/2…

从小众到主流:KOC如何凭借微影响力塑造品牌传播新格局

随着数字化的飞速发展&#xff0c;KOC作为社交媒体上的一股新兴力量&#xff0c;正以其微小的粉丝基数和高度互动性&#xff0c;引发一场微影响力革命。与传统的KOL不同&#xff0c;KOC通常拥有较小的粉丝基数&#xff0c;但却能够凭借高度互动性和真实的消费者体验&#xff0c…

编写一个问卷界面 并用JavaScript来验证表单内容

倘若文章和代码中有任何错误或疑惑&#xff0c;欢迎提出交流哦~ 简单的html和css初始化 今天使用JavaScript来实现对表单输入的验证&#xff0c; 首先写出html代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset&qu…

FY-SA-20237·8-WhyWeSpin

Translated from the Scientific American, July/August 2023 issue. Why We Spin (我们为什么旋转) Primates may play with reality by twirling around 翻译&#xff1a;灵长类动物有能力通过旋转或旋转运动来操纵或扭曲他们对现实的感知。 解释&#xff1a; “Primates”…

跟着大佬学RE(二)

[ACTF新生赛2020]easyre enc~}|{zyxwvutsrqponmlkjihgfedcba_^]\[ZYXWVUTSRQPONMLKJIHGFEDCBA?><;:9876543210/.-,*)(\0x27&%$# !" v4*F\"N,\"(I? v4list(map(ord,v4)) print(v4) #( v4[i] ! _data_start__[*((char *)v5 i) - 1] ) flaglist(ACTF…

光猫、路由器的路由模式、桥接模式、拨号上网

下面提到的路由器都是家用路由器 一、联网条件 1.每台电脑、路由器、光猫想要上网&#xff0c;都必须有ip地址。 2.电脑获取ip 可以设置静态ip 或 向DHCP服务器(集成在路由器上) 请求ip 电话线上网时期&#xff0c;猫只负责模拟信号和数字信号的转换&#xff0c;电脑需要使…

折半查找二分查找

简介 折半查找也就是二分查找&#xff0c;也可以叫二分法&#xff0c;本质上都是一样的&#xff0c;通过比对中间值与目标值&#xff0c;一次性就能筛掉一半的数字。 举例&#xff1a; 一个猜数字游戏&#xff0c;让你来猜1-100中我选中的数&#xff0c;如果猜中游戏结束&…

EE trade:量化交易需要什么条件才能做

量化交易结合了金融市场知识和计算机科学技术&#xff0c;利用数学和统计模型来进行交易决策。要成功进行量化交易&#xff0c;需要具备以下几个方面的条件&#xff1a; 1. 知识和技能 金融市场知识&#xff1a;需要理解金融市场的基本原理&#xff0c;包括股票、债券、期货、…

学会读书并不简单,如何真正学会读书

一、教程描述 读书是要讲究方法的&#xff0c;否则就会事倍功半&#xff0c;比如&#xff0c;在学习书本上的每一个问题每一章节的时候&#xff0c;首先应当不只看到书面上&#xff0c;而且还要看到书背后的东西&#xff0c;在对书中每一个问题都经过细嚼慢咽&#xff0c;其次…

AI对话聊天软件有哪些?这5款AI软件值得推荐

AI对话聊天软件有哪些&#xff1f;AI对话聊天软件在现代社会中的重要性日益凸显。它们不仅是沟通的工具&#xff0c;更是人们日常生活中的智能助手。通过深度学习和自然语言处理技术&#xff0c;这些软件能够理解我们的意图&#xff0c;提供个性化的建议和服务&#xff0c;让交…

电生明火电火灶是高科技革命还是营销噱头?

电火灶&#xff0c;一个近年来逐渐进入公众视野的新型厨房烹饪设备&#xff0c;凭借其电生明火的独特技术引起了广泛的讨论和关注。然而&#xff0c;关于其是否真正代表高科技革命&#xff0c;还是仅仅是一个营销噱头&#xff0c;外界众说纷纭。今天&#xff0c;我们就来深度解…

在gitlab上发布npm二进制文件

❝ 允许奇迹发生 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 还记得之前我们讲过如何在 npm 上发布二进制文件&#xff1f;吗。我们通过npm将我们之前在Rust 赋能前端-开发一款属于你的前端脚手架中生成Rust二进制文…

进程通信——管道

什么是进程通信&#xff1f; 进程通信是实现进程间传递数据信息的机制。要实现数据信息传递就要进程间共享资源——内存空间。那么是哪块内存空间呢&#xff1f;进程间是相互独立的&#xff0c;一个进程不可能访问其他进程的内存空间&#xff0c;那么这块空间只能由操作系统提…

私有化部署的无忧企业文档,助力企业实现文档权限的精细化管理

在当今数字化快速发展的时代&#xff0c;企业文档管理已成为企业运营中不可或缺的一部分。文档的安全性和访问权限的精确控制对于企业的信息保护至关重要。在无忧企业文档管理系统中&#xff0c;不仅具备强大的内容管理能力&#xff0c;更在权限管理上做到了细致入微。下面我对…

完全背包(类买卖股票问题)

题目传送门——纪念品 题解&#xff1a;这题我一开始以为是简答的那个买卖股票问题&#xff0c;但是做了之后发现并没有那么简单&#xff0c;但是经过思考时候&#xff0c;我发现其和完全背包类问题差不多&#xff0c;怎么说呢&#xff0c;我们首先用p[i][j]去统计每天每种物品…

手写最小的 Agent 系统 — Tiny Agent

调研Agent核心思想&#xff0c;主要有metagpt、React、Reflexion、Toolformer、Swiftsage、Creator等等。Tiny Agent 实现&#xff0c;主要包括 构造大模型、构造工具、构造Agent、运行Agent等步骤。 Agent 核心思想 1. MetaGPT METAGPT: META PROGRAMMING FOR A MULTI-AGEN…

bugku 隐写

说明&#xff1a; 隐写&#xff0c;通过改变图片的大小&#xff0c;即修改了高或者宽&#xff0c;达到隐写flag&#xff0c;要求修改会图片的真实大小找到flag。 1、打开图片 2、使用010editor工具打开图片 通过最下面黄底字的错误提示&#xff0c;表示CRC不匹配&#xff0c;…

如何创建一个Angular项目(超简单)

1、安装Node.js&#xff08;官网Node.js下载&#xff09; 2、运行node -v和npm -v两条命令&#xff08;检验是否下载成功Node.js&#xff09; 3、npm i -g cnpm --registryhttps://registry.npmmirror.com&#xff08;用npm安装cnpm&#xff0c;将镜像源设置为国内镜像源&…

python办公自动化——(三)替换PPT文档中图形数据-折线图

数据替换前 数据替换后 代码实现 # 单折线 pathE:\\13 python 下侧双x轴折线图\\ prs Presentation(path双x轴测试-01.pptx) data_timepd.read_excel(path"数据.xlsx",sheet_name单折线)ppt_9prs.slides…

汽车识别项目

窗口设计 这里的代码放在py文件最前面或者最后面都无所谓 # 创建主窗口 window tk.Tk() window.title("图像目标检测系统") window.geometry(1000x650) # 设置窗口大小# 创建背景画布并使用grid布局管理器 canvas_background tk.Canvas(window, width1000, height…