將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.pswp.cn/bicheng/22185.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/22185.shtml
英文地址,請注明出處:http://en.pswp.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工程…