当前位置: 首页 > news >正文

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

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)
}

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

相关文章:

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

import html2canvasPro from html2canvas // 截图&#xff0c;平辅表格 async function resetAgSize() {const allColumns gridApi.value.getColumns()let totalColumnWidth 0let totalColumnHeight 0// 遍历每一个行节点gridApi.value.forEachNode((rowNode) > {totalCo…...

洛谷P1255

P1255 数楼梯 - 洛谷 | 计算机科学教育新生态 数楼梯 题目描述 楼梯有 N 阶&#xff0c;上楼可以一步上一阶&#xff0c;也可以一步上二阶。 编一个程序&#xff0c;计算共有多少种不同的走法。 输入格式 一个数字&#xff0c;楼梯数。 输出格式 输出走的方式总数。 样…...

vue3设置第三方组件 样式::v-deep

在Vue 3中&#xff0c;使用了Composition API的组件可以通过<style>标签内部的::v-deep选择器来深入作用于第三方组件的样式。::v-deep是一个 Scoped CSS 的“深度选择器”&#xff0c;可以穿透组件边界&#xff0c;影响子组件的样式。比如我想修改el-date-picker的颜色边…...

JAVA学习日记(十四)集合进阶

一、单列集合Collection List系列集合特点&#xff1a;添加的元素是有序&#xff08;存和取的顺序一致&#xff09;、可重复、有索引 Set系列集合特点&#xff1a;添加的元素是无序&#xff08;存和取的顺序有可能不一致&#xff09;、不重复、无索引 Collection是所有单列集合…...

mysql全量与增量备份

binlog日志&#xff1a; 从上一次全量备份到下一次全量备份直接产生的数据。 一、全备和增量备份介绍 1、全量备份&#xff1a; 备份所有数据库或只备份一个数据库&#xff0c;全量备份之后&#xff0c;全量备份之前的binlog日志就没用了&#xff0c;一般生产环境会保留3-7天…...

“非法”操控lambda(python)

能过python解释器关卡即是合法脚本代码&#xff0c;偶尔的“违规”操控也是一种唯美。 (笔记模板由python脚本于2024年11月13日 11:18:21创建&#xff0c;本篇笔记适合熟悉python的lambda操控的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.pyth…...

UDP协议和TCP协议之间有什么具体区别?

UDP&#xff08;User Datagram Protocol&#xff09;和TCP&#xff08;Transmission Control Protocol&#xff09;是两种常见的网络传输协议&#xff0c;它们在数据传输中有着显著的区别和适用场景。理解它们的区别对于网络工程师、软件开发人员以及网络安全专家都是至关重要的…...

论文5—《基于改进YOLOv5s的轻量化金银花识别方法》文献阅读分析报告

论文报告&#xff1a;基于改进YOLOv5s的轻量化金银花识别方法 论文报告文档 基于改进YOLOv5s的轻量化金银花识别方法 论文报告文档摘要国内外研究现状国内研究现状国外研究现状 研究目的研究问题使用的研究方法试验研究结果文献结论创新点和对现有研究的贡献1. 目标检测技术2. …...

快手直播间采集教程,快手引流,快手截流,截流工具,直播间截流,快手直播间采集,获客系统,获客软件

功能&#xff1a; 1.输入快手直播间链接可一键监控直播间 2.可采集新进直播间的人 3.可采集直播间所有动作&#xff0c;包含&#xff1a;发弹幕的人和内容、送礼物的人和送的礼物、点亮爱心的人 4.可一键导出新进直播间的快手ID 5.可一键导出直播间动作列表&#xff0c;也可以筛…...

探索MoviePy:Python视频编辑的瑞士军刀

文章目录 &#x1f3ac; 探索MoviePy&#xff1a;Python视频编辑的瑞士军刀第一部分&#xff1a;背景介绍第二部分&#xff1a;MoviePy是什么&#xff1f;第三部分&#xff1a;如何安装MoviePy&#xff1f;第四部分&#xff1a;MoviePy的基本函数使用方法1. 视频剪辑2. 视频拼接…...

mysql 实现分库分表之 --- 基于 MyCAT 的分片策略详解

引言 在我们日常工作的项目中&#xff0c;特别是面向 C 端用户的产品&#xff0c;随着业务量的逐步扩大&#xff0c;数据量也呈指数级增长。为了应对日益增长的数据库压力&#xff0c;数据库优化已成为项目中不可或缺的一环&#xff0c;而分库分表则是海量数据优化方案中的重要…...

Opencascade基础教程(14): 一个模型显示问题

如果显示模型时出现如图情况&#xff0c;正对屏幕的平面特别亮&#xff0c;只需要设置材质为非金属就行。 //创建box并显示TopoDS_Shape aShape BRepPrimAPI_MakeBox(100, 100, 100);Handle(AIS_Shape) aisShpae new AIS_Shape(aShape);aisShpae->SetDisplayMode(AIS_Shad…...

ISP——你可以从这里起步(二)

接上一篇&#xff0c;上一篇是原理篇&#xff0c;这一篇是实战篇&#xff0c;为了实现下面框图中的不完美ISP。 第一章 做一张RAW图自己用 不是所有的人都能获得raw图&#xff0c;即使获得了raw图也需要对应的sensor参数才能把它用起来&#xff0c;所以我找了一条野路子可以把…...

Qt / Qt Quick程序打包的一些坑 (四)

【写在前面】 打包方法见 Qt / Qt Quick程序打包的方法。 这里是再次记录一些坑。 【正文开始】 直接进入正题&#xff1a; 在 Qt5 中&#xff0c;如果我们的 Qml 中使用了【Qt Shapes】模块&#xff0c;那么在打包的时候&#xff0c;会缺少Qt5QuickShapes.dll。 然后&#xff…...

《传统视觉算法在视觉算法中的地位及应用场景

一、引言 在计算机视觉领域的发展历程中&#xff0c;传统视觉算法扮演了至关重要的角色。尽管近年来深度学习算法在视觉任务中取得了巨大的成功&#xff0c;但传统视觉算法依然具有不可替代的地位。传统视觉算法通常基于数学模型和手工设计的特征&#xff0c;具有计算效率高、…...

老老实实干一辈子程序员是没出息的!这本证书你早该学!

一、程序员有没有必要学软考&#xff1f; 当然有&#xff0c;因为你不可能一辈子都是程序员。 你了解或者接触过30岁、35岁以上的程序员去向吗&#xff1f; 我毕业快十年了&#xff0c;当初正赶上互联网时代的浪潮&#xff0c;好几个学计算机的同学毕业后去了一线城市或者深…...

鸿蒙next版开发:相机开发-录像(ArkTS)

在HarmonyOS 5.0中&#xff0c;ArkTS提供了一套完整的API来管理相机功能&#xff0c;特别是录像功能。本文将详细介绍如何在ArkTS中实现录像功能&#xff0c;并提供代码示例进行详细解读。 录像功能开发步骤 1. 导入相关接口 首先&#xff0c;需要导入相机相关的接口&#x…...

闯关leetcode——3206. Alternating Groups I

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/alternating-groups-i/description/ 内容 There is a circle of red and blue tiles. You are given an array of integers colors. The color of tile i is represented by colors[i]: colors[i…...

多个摄像机画面融合:找到同一个目标在多个画面中的伪三维坐标,找出这几个摄像头间的转换矩阵

搞算法&#xff0c;重要的是解决问题的思想&#xff0c;不要再局限于语言、框架、性能&#xff01;&#xff01;&#xff01; 要解决的问题是&#xff1a;在某一个摄像头画面中&#xff0c;目标会被遮挡或者丢失&#xff0c;但在另外一个摄像机画面中&#xff0c;目标完整&…...

Three.js性能优化和实践建议

Three.js 是一个功能强大的 3D 引擎&#xff0c;当场景足够大的时候&#xff0c;就会出现卡顿的现象&#xff0c;首先要保证电脑的性能够用&#xff0c;然后看看下面方法&#xff0c;帮助你提高应用的运行效率。 1. 使用 stats.js 监视性能 在进行任何优化之前&#xff0c;首…...

技术无罪,人心可畏 —— 写在 315 “GEO 投毒” 话题之后

2026 年央视 315 晚会&#xff0c;将镜头对准了人工智能领域的灰色地带 ——“AI 投毒” 与 “GEO” 一夜之间成为公众热议的话题。记者虚构了一款名为 “Apollo-9” 的智能手环&#xff0c;借助 “GEO 优化系统” 批量生成虚假内容&#xff0c;短短数小时就让多个主流 AI 大模…...

小爱音箱音乐自由播放器:解锁无限听歌体验的完整指南

小爱音箱音乐自由播放器&#xff1a;解锁无限听歌体验的完整指南 【免费下载链接】xiaomusic 使用小爱音箱播放音乐&#xff0c;音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 你是否厌倦了音乐平台的各种限制&#xff1f;是否想…...

Phi-4-mini-reasoning真实案例:教育机构自动批题与答案生成应用

Phi-4-mini-reasoning真实案例&#xff1a;教育机构自动批题与答案生成应用 1. 教育场景中的智能批改需求 在教育培训行业&#xff0c;教师每天需要花费大量时间批改作业和试卷。传统的人工批改方式存在几个明显痛点&#xff1a; 时间成本高&#xff1a;一位数学老师批改50份…...

GLM-4.1V-9B-Base保姆级教学:Web界面截图+问题输入框最佳实践

GLM-4.1V-9B-Base保姆级教学&#xff1a;Web界面截图问题输入框最佳实践 1. 认识GLM-4.1V-9B-Base GLM-4.1V-9B-Base是智谱开源的视觉多模态理解模型&#xff0c;专门用于处理图像内容识别、场景描述、目标问答和中文视觉理解任务。这个模型已经完成了Web化封装&#xff0c;可…...

Git从入门到精通:完整学习路线图,全面详细一次过

Git超详细使用教程&#xff1a;从入门到高级&#xff08;全面详解&#xff5c;目录结构&#xff5c;口语化专业双轨&#xff5c;长文警告&#xff09; ⚠️ 长文警告&#xff1a;全文共 6218 字&#xff0c;覆盖 Git 全生命周期操作&#xff0c;含 18 个核心章节、7 张结构化对…...

Retinaface+CurricularFace模型在智能门禁系统中的实战应用

RetinafaceCurricularFace模型在智能门禁系统中的实战应用 1. 引言 想象一下这样的场景&#xff1a;每天早晨上班高峰期&#xff0c;办公楼入口排着长队等待刷卡进门&#xff1b;访客需要在前台登记身份证&#xff0c;保安还要手动核对信息。这种传统门禁方式不仅效率低下&am…...

新手避坑指南:PX4飞控连接TFmini、LIDAR Lite V3等定高雷达的完整接线与参数配置(QGC实操)

PX4飞控与定高雷达实战&#xff1a;从接线到参数配置的避坑指南 刚拿到PX4飞控和一堆传感器的新手们&#xff0c;面对密密麻麻的接口和参数设置&#xff0c;是不是有种无从下手的感觉&#xff1f;特别是当你需要连接定高雷达时&#xff0c;不同品牌&#xff08;北醒TFmini、LID…...

PHP+MySQL图书管理系统实战:从环境搭建到功能实现的保姆级教程(附完整源码)

PHPMySQL图书管理系统实战&#xff1a;从零构建企业级应用 1. 环境配置与项目初始化 在开始构建图书管理系统之前&#xff0c;我们需要搭建一个稳定的开发环境。不同于传统的独立安装方式&#xff0c;我将推荐使用Docker容器化方案&#xff0c;这能确保开发环境的一致性并避免&…...

保姆级万物识别教程:阿里开源镜像快速部署,识别图片超简单

保姆级万物识别教程&#xff1a;阿里开源镜像快速部署&#xff0c;识别图片超简单 1. 开篇&#xff1a;为什么选择这个镜像&#xff1f; 今天给大家介绍一个特别实用的AI工具——阿里开源的"万物识别-中文-通用领域"镜像。这个镜像最大的特点就是简单易用&#xff…...

SMUDebugTool核心功能全解析:从故障排查到性能优化

SMUDebugTool核心功能全解析&#xff1a;从故障排查到性能优化 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitco…...