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

news2024/11/13 23:33:37
import html2canvasPro from 'html2canvas'
// 截图,平辅表格
async function resetAgSize() {
  const allColumns = gridApi.value.getColumns()
  let totalColumnWidth = 0
  let totalColumnHeight = 0
  // 遍历每一个行节点
  gridApi.value.forEachNode((rowNode) => {
    totalColumnHeight += rowNode.rowHeight
  })
  // debugger
  // 遍历每一个列节点
  allColumns.forEach((column) => {
    totalColumnWidth += column.getActualWidth()
  })
  // 处理让内容撑开  ,渲染完毕之后
  // 重新应用更新后的设置到ag-grid
  AgGridVueScreen.value = document.querySelector('.ag-grid-vue') as HTMLElement
  const initHeight = AgGridVueScreen.value.getBoundingClientRect().height
  AgGridVueScreen.value.style.width = totalColumnWidth + 10 + 'px'
  AgGridVueScreen.value.style.height = totalColumnHeight + 100 + 'px'
  AgGridScreen.value = document.querySelector('.ag-grid') as HTMLElement
  AgGridScreen.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 = 0

  while (currentScrollTop < pageHeight) {
    // 为当前垂直切片创建一个数组,用于存储水平方向的截图片段
    const horizontalScreenshots = []

    // 记录当前水平滚动位置
    let currentScrollLeft = 0

    while (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 URL
  const finalScreenshot = screenshots[1] ? screenshots[0][screenshots[1].length - 1] : [screenshots.length - 1]

  // 创建一个下载链接并触发下载
  const downloadLink = document.createElement('a')
  downloadLink.href = finalScreenshot
  downloadLink.download = 'screenshot.png'
  document.body.appendChild(downloadLink)
  downloadLink.click()
  document.body.removeChild(downloadLink)
}

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vs2015QT项目添加多语言翻译总结

一、简介 当软件有国际化的需求时&#xff0c;就需要多语言翻译功能&#xff0c;最常见的语言就是支持中文和英语&#xff0c;本文介绍在vs2015QT环境下&#xff0c;进行国际化翻译的具体流程。 二、多语言翻译实现流程 1.底层实现原理介绍 QT写的客户端软件&#xff0c;能…

wireshark演进之路——从GTK到Qt

Wireshark 自 1998 年诞生至今&#xff0c;已有超过26年的历史了。它最早由 Gerald Combs 创建&#xff0c;最初名为 Ethereal。2006 年&#xff0c;Ethereal 更名为 Wireshark&#xff0c;并继续发展成了全球领先且人尽皆知的网络协议分析工具&#xff0c;其GUI演变就是其中非…

哈希表的实现--C++

文章目录 一、哈希概念1.1、直接定址法1.2、哈希冲突1.3、负载因子1.4、将关键字转为整数1.5、哈希函数1.5.1、除法散列法/除留余数法1.5.2、乘法散列法1.5.3、全域散列法1.5.4、其他方法 二、处理哈希冲突2.1、开放定址法2.1.1、线性探测2.1.2、二次探测2.1.3、双重散列2.1.4、…

Python学习从0到1 day26 第三阶段 Spark ② 数据计算Ⅰ

人总是会执着于失去的&#xff0c;而又不珍惜现在所拥有的 —— 24.11.9 一、map方法 PySpark的数据计算&#xff0c;都是基于RDD对象来进行的&#xff0c;采用依赖进行&#xff0c;RDD对象内置丰富的成员方法&#xff08;算子&#xff09; map算子 功能&#xff1a;map算子…

D67【python 接口自动化学习】- python基础之数据库

day67 Python操作MySQL基础使用 学习日期&#xff1a;20241113 学习目标&#xff1a;MySQL数据库-- 136 Python操作MySQL基础使用 学习笔记&#xff1a; pymysql 创建MySQL的数据库链接 执行sql语句 总结 Python中使用第三方库&#xff1a;pymysql来操作MySQL&#xff0c;…

Linux驱动开发基础——Hello驱动程序(一)

目录 一、Hello驱动 一、Hello驱动 我们选用的内核都是 4.x 版本&#xff0c;操作都是类似的&#xff1a; 1.1、APP 打开的文件在内核中如何表示 open函数原型&#xff1a; int open(const char *pathname, int flags, mode_t mode); 仔细看函数的参数&#xff0c;再对比看 内…

2.初始sui move

vscode安装move插件 查看sui 客户端版本号 sui client --version 创建新项目 sui move new <项目名> sui move new hello_world 项目目录结构&#xff1a; hello_world ├── Move.toml ├── sources │ └── hello_world.move └── tests└── hello_world…

学习日志009--面向对象的编程

一、面向对象 面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称OOP&#xff09;是一种编程范式&#xff0c;它使用“对象”来设计应用程序和计算机程序。它利用了抽象、封装、继承和多态这些概念。 一、面向对象编程的核心概念 封装&#xff08;Encaps…

Redis8:商户查询缓存2

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…

在 WPF 中,如何实现数据的双向绑定?

在 WPF 中&#xff0c;数据绑定是一个非常重要的特性&#xff0c;它允许 UI 与数据源之间自动同步。双向绑定是一种常见的绑定方式&#xff0c;当数据源更新时&#xff0c;UI 会自动更新&#xff1b;同样&#xff0c;当 UI 中的元素&#xff08;如文本框&#xff09;发生改变时…

DAY6 线程

作业1&#xff1a; 多线程实现文件拷贝&#xff0c;线程1拷贝一半&#xff0c;线程2拷贝另一半&#xff0c;主线程回收子线程资源。 代码&#xff1a; #include <myhead.h> sem_t sem1; void *copy1()//子线程1函数 拷贝前一半内容 {int fd1open("./1.txt",O…

# filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝, 失败,无法连接服务器”解决方案

filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝&#xff0c; 失败&#xff0c;无法连接服务器”解决方案 一、问题描述&#xff1a; 当我们用filezilla客户端 连接 虚拟机ubuntu系统时&#xff0c;报错“尝试连接 ECONNREFUSED - 连接被服务…

网安数学基础-同余关系

文章目录 参考等价关系实例 同余同余和等价同余的运算 乘法逆元一次同余方程消去律 剩余类中国剩余定理欧拉函数欧拉定理 费马小定理 参考 【一口气学完】密码学的数学基础2&#xff0c;《同余关系》&#xff0c;一小时学完 等价关系 三角形里的全等关系 等价关系定义 下面这…

高校数字校园建设的数字身份管理难题

近年来&#xff0c;我国高等院校在《中国教育现代化2035》战略的要求下&#xff0c;在《高等学校数字校园建设规范&#xff08;试行&#xff09;》的指引下&#xff0c;掀起了数字校园建设高潮。借助教学、科研、管理、服务等种类的业务应用&#xff0c;高校提升了业务的数字化…

HDLC和PPP原理与配置

HDLC:高级数据链路控制 PPP:点到点协议 PPP:包括LCP链路控制协议,用于各种链路协议层参数的协商内容包括最大接收单元MRU,认证方式,魔术字等选项. NCP:网络控制协议,用于各网络层参数的协商,更好地支持了网络层协议. PAP:口令认证. CHAP:质询握手认证协议 PPP有两种验证方式…

Oracle数据库 查看SQL执行计划的几种方法

前言 在日常的运维工作中&#xff0c;SQL优化是DBA的进阶技能&#xff0c;SQL优化的前提是要看SQL的执行计划是否正确&#xff0c;下面分享几种查看执行计划的方法&#xff0c;每一种方法都各有各的好处&#xff0c;可以根据特定场景选择某种方法。 一.使用AUTOTRACE查看执行…

Hbase Shell

一、启动运行HBase 首先登陆SSH&#xff0c;由于之前在Hadoop的安装和使用中已经设置了无密码登录&#xff0c;因此这里不需要密码。然后&#xff0c;切换至/usr/local/hadoop&#xff0c;启动Hadoop&#xff0c;让HDFS进入运行状态&#xff0c;从而可以为HBase存储数据&#…

31-2 智能驾驶系统

智能驾驶功能分类 安全类功能 纵向 FCW/AEB FCTA/FCTB/RCTA/RCTB RVW/RVB 横向 ESA LSS LKA/LDW/ELK 盲区安全辅助 BSD LCA DOW CVW 舒适功能类 纵向 ACC CSA TSR ISA 横向 LCC ILC ALC 横纵向 TJA/HWA NOP 泊车功能 RAP 蓝牙通信&#xff0c;环视超车波 HPA 记忆泊车…

ubuntu20.04_从零LOD-3DGS的复现

环境要求 dependencies:- cudatoolkit11.6- plyfile0.8.1- python3.7.13- pip22.3.1- pytorch1.12.1- torchaudio0.12.1- torchvision0.13.1- tqdm1. 安装conda创建环境 conda create -n lod-3dgs python3.7.132. 安装CUDA11.6和相应cuDNN。 2.1 CUDA CUDA安装参考CUDA10.1…

Linux:网络协议socket

我们之前学的通信是本地进程间通信&#xff0c;如果我们想在网络间通信的话&#xff0c;就需要用到二者的ip地址&#xff0c;分别被称为源IP地址和目的IP地址&#xff0c;被存入ip数据包中&#xff0c;其次我们还需要遵循一些通信协议。 TCP协议&#xff1a;传输层协议&#x…