基于表格滚动截屏(表格全部展开,没有滚动条)

import html2canvasPro from 'html2canvas'
// 截图,平辅表格
async function resetAgSize() {const allColumns = gridApi.value.getColumns()let totalColumnWidth = 0let totalColumnHeight = 0// 遍历每一个行节点gridApi.value.forEachNode((rowNode) => {totalColumnHeight += rowNode.rowHeight})// debugger// 遍历每一个列节点allColumns.forEach((column) => {totalColumnWidth += column.getActualWidth()})// 处理让内容撑开  ,渲染完毕之后// 重新应用更新后的设置到ag-gridAgGridVueScreen.value = document.querySelector('.ag-grid-vue') as HTMLElementconst initHeight = AgGridVueScreen.value.getBoundingClientRect().heightAgGridVueScreen.value.style.width = totalColumnWidth + 10 + 'px'AgGridVueScreen.value.style.height = totalColumnHeight + 100 + 'px'AgGridScreen.value = document.querySelector('.ag-grid') as HTMLElementAgGridScreen.value.style.height = initHeight + 'px'AgGridScreen.value.style.overflow = 'scroll'await nextTick()await onScreenshot(AgGridVueScreen.value, AgGridScreen.value)//截图结束后记得恢复表格原本样式AgGridVueScreen.value.style.height = initHeight + 'px'AgGridVueScreen.value.style.width = '100%'AgGridScreen.value.removeAttribute('style')
}

在这里插入图片描述

export default async function onScreenshot(dom, dom2) {console.log(dom2, dom2.scrollHeight)// 获取页面的总高度const pageHeight = dom2.scrollHeight// 获取当前视口的高度const viewportHeight = dom2.clientHeight// 获取页面的总高度const pageWidth = dom2.scrollWidth// 获取当前视口的高度const viewportWidth = dom2.clientWidth// 创建一个用于存储截图片段的数组// 创建用于存储截图片段的二维数组,第一维表示垂直方向的切片,第二维表示水平方向的切片const screenshots = []// 记录当前垂直滚动位置let currentScrollTop = 0while (currentScrollTop < pageHeight) {// 为当前垂直切片创建一个数组,用于存储水平方向的截图片段const horizontalScreenshots = []// 记录当前水平滚动位置let currentScrollLeft = 0while (currentScrollLeft < pageWidth) {// 使用html2canvas对当前可视区域进行截图const canvas = await html2canvasPro(dom, {// 设置截图区域为当前可视区域windowWidth: viewportWidth,windowHeight: viewportHeight,scrollX: currentScrollLeft,scrollY: currentScrollTop,useCORS: true,allowTaint: true})try {// 将截图转换为数据URL格式并添加到水平截图片段数组中horizontalScreenshots.push(canvas.toDataURL())} catch (e) {console.error('截图过程出现问题:', e)}// 滚动内容容器到下一个可视区域(水平方向)dom2.scrollTo(currentScrollLeft + viewportWidth, currentScrollTop)// 更新当前水平滚动位置currentScrollLeft += viewportWidth}// 将当前垂直切片的水平截图片段数组添加到总的截图片段二维数组中screenshots.push(horizontalScreenshots)// 滚动内容容器到下一个可视区域(垂直方向)dom2.scrollTo(0, currentScrollTop + viewportHeight)// 更新当前垂直滚动位置currentScrollTop += viewportHeight}// 获取完整截图的Data URLconst finalScreenshot = screenshots[1] ? screenshots[0][screenshots[1].length - 1] : [screenshots.length - 1]// 创建一个下载链接并触发下载const downloadLink = document.createElement('a')downloadLink.href = finalScreenshotdownloadLink.download = 'screenshot.png'document.body.appendChild(downloadLink)downloadLink.click()document.body.removeChild(downloadLink)
}

这种滚动截图比较耗费性能,如果表格过大没有必要使用这种方式。
尝试让后端调用页面截图,使用无头浏览器,节省性能。

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

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

相关文章

运行springBlade项目历程

框架选择 官网地址&#xff1a;https://bladex.cn 使用手册&#xff1a;https://www.kancloud.cn/smallchill/blade 常见问题&#xff1a;https://sns.bladex.cn/article-14966.html 问答社区&#xff1a;https://sns.bladex.cn 环境配置 存在jdk8的情况下安装jdk17 jdk17gi…

文件上传漏洞--理论

什么是文件上传漏洞&#xff1f; Web应用允许用户上传文件&#xff0c;但是没有对上传的文件进行严格的过滤和检测&#xff0c;导致网站执行了文件中包含的恶意代码。 漏洞的基本利用方式是&#xff1a; 成功上传包含恶意代码的文件&#xff0c;并在服务端成功执行该文件。 …

物联网(RFID)全景:被装信息化监控应用与挑战

一、被装物联网信息化建设的动因 信息化改革在20世纪80年代中期启航&#xff0c;旨在提升被装保障的效率。随着时间的推移&#xff0c;硬件的广泛运用和软件的快速迭代&#xff0c;装备业务在规划、制造、分发以及战时支援等核心环节&#xff0c;已经与信息系统深度融合&#x…

解决C盘空间不足的三种方案

方案一&#xff1a;网上盛传的C盘磁盘碎片整理&#x1f9e9;&#xff08;原理&#xff1a;将分散的文件片段整理到相邻的磁盘区域&#xff0c;减少文件的碎片化程度&#xff09;(效果不明显) 方案二&#xff1a;把其他盘的空间给C盘 &#x1f4bd;&#xff08;效果显著&#xf…

[项目代码] YOLOv5 铁路工人安全帽安全背心识别 [目标检测]

YOLOv5是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv5具有更高的…

有什么初学算法的书籍推荐?

对于初学算法的读者&#xff0c;以下是一些值得推荐的书籍&#xff1a; 1、算法超简单&#xff1a;趣味游戏带你轻松入门与实践 作者&#xff1a;童晶 著 推荐理由&#xff1a;本书把趣味游戏应用于算法教学&#xff0c;提升读者的学习兴趣&#xff0c;并通过可视化的图解和动…

卸载一直显示在运行的应用

GX_work2: 打开文件 CtrlA全选卸载&#xff0c;他会显示有正在运行的软件点击跳过 然后打开被跳过的文件&#xff0c;CtrlA全选卸载 可能还是会显示有正在运行的软件点击跳过 直到出现.exe应用&#xff0c;最后打开任务管理器搜索此.exe应用&#xff0c;关闭它 最后完全卸载…

问:MySQL主从同步的机制梳理?

MySQL主从复制是一种数据库复制技术&#xff0c;通过将一个MySQL数据库服务器&#xff08;主节点&#xff09;的数据复制到一个或多个其他MySQL数据库服务器&#xff08;从节点&#xff09;&#xff0c;实现数据的自动同步。这种技术不仅提高了数据的可用性&#xff0c;还能通过…

基于BILSTM及其他RNN序列模型的人名分类器

数据集Kaggle链接 NameNationalLanguage | Kaggle 数据集分布: 第一列为人名,第二列为国家标签 代码开源地址 Kaggle代码链接 https://www.kaggle.com/code/houjijin/name-nationality-classification Gitee码云链接 人名国籍分类 Name Nation classification: using BI…

期权懂|期权新手入门教学:期权合约有哪些要素?

期权小懂每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 期权新手入门教学&#xff1a;期权合约有哪些要素&#xff1f; 期权合约&#xff1a;是指约定买方有权在将来某一时间以特定价格买入或卖出约定标的物的标准化或非标准化合约。期…

Oracle OCP认证考试考点详解082系列16

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 76. 第76题&#xff1a; 题目 解析及答案&#xff1a; 以下哪三项活动会被记录在数据库的警报日志中&#xff1f; A. 块损坏错误 数据库…

【Linux篇】面试——用户和组、文件类型、权限、进程

目录 一、权限管理 1. 用户和组 &#xff08;1&#xff09;相关概念 &#xff08;2&#xff09;用户命令 ① useradd&#xff08;添加新的用户账号&#xff09; ② userdel&#xff08;删除帐号&#xff09; ③ usermod&#xff08;修改帐号&#xff09; ④ passwd&…

论文阅读《机器人状态估计中的李群》

目录 摘要1 介绍2 微李理论2.1 李群2.2 group actions2.3 正切空间和李代数 摘要 李群是一个古老的数学抽象对象&#xff0c;可以追溯到19世纪&#xff0c;当时数学家 Sophus Lie奠定了连续变换群理论的基础。多年后&#xff0c;它的影响已经蔓延到科学和技术的各个领域。在机…

智能零售柜商品识别

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

综合案例铁锅炖(CSS项目大杂烩)

小工具&#xff1a;snipaste 全世界最好用的截图工具来了 Snipaste是一个强大简单的截图工具&#xff0c;方便的点就在于可以把截图贴回屏幕上 常用快捷方式有这些&#xff1a; 1.F1截图&#xff0c;同时测量大小&#xff0c;设置箭头&#xff0c;文字书写 2.F3在桌面置顶显示…

稀疏视角CBCT重建的几何感知衰减学习|文献速递-基于深度学习的病灶分割与数据超分辨率

Title 题目 Geometry-Aware Attenuation Learning forSparse-View CBCT Reconstruction 稀疏视角CBCT重建的几何感知衰减学习 01 文献速递介绍 稀疏视角锥形束计算机断层扫描&#xff08;CBCT&#xff09;重建的几何感知学习方法 锥形束计算机断层扫描&#xff08;CBCT&a…

河南省的一级科技查新机构有哪些?

科技查新&#xff0c;简称查新&#xff0c;是指权威机构对查新项目的新颖性作出文献评价的情报咨询服务。这一服务在科研立项、成果鉴定、项目申报等方面发挥着至关重要的作用。河南省作为中国的重要科技和教育基地&#xff0c;拥有多个一级科技查新机构&#xff0c;为本省及全…

https网站 请求http图片报错:net::ERR_SSL_PROTOCOL_ERROR

问题描述 场景&#xff1a; https网站&#xff0c;请求http图片资源报错&#xff1a;net::ERR_SSL_PROTOCOL_ERROR 原因&#xff1a; Chrome 81 中&#xff0c;对混合内容资源加载策略进行了改变&#xff0c;会自动升级到 https:// &#xff0c;如果无法通过 https:// 加载&am…

【机器学习】机器学习中用到的高等数学知识-3.微积分 (Calculus)

3. 微积分 (Calculus) 导数和梯度&#xff1a;用于优化算法&#xff08;如梯度下降&#xff09;中计算损失函数的最小值。偏导数&#xff1a;在多变量函数中优化目标函数。链式法则&#xff1a;在反向传播算法中用于计算神经网络的梯度。 导数和梯度&#xff1a;用于优化算法…

华为大咖说 | 浅谈智能运维技术

本文分享自华为云社区&#xff1a;华为大咖说 | 浅谈智能运维技术-云社区-华为云 本文作者&#xff1a;李文轩 &#xff08; 华为智能运维专家 &#xff09; 全文约2695字&#xff0c;阅读约需8分钟 在大数据、人工智能等新兴技术的加持下&#xff0c;智能运维&#xff08;AI…