antDv table组件滚动截图方法的实现

在开发中经常遇到table内容过多产生滚动的场景，正常情况下不产生滚动进行截图就很好实现，一旦产生滚动就会变得有点棘手。

下面分两种场景阐述解决的方法过程

场景一：右侧不固定列的情况
在这里插入图片描述
场景二：右侧固定列的情况
在这里插入图片描述
场景一

打开控制台我们发现表格的dom节点结构是这样子的
在这里插入图片描述
在这里插入图片描述
可以看到上面这两块内容并不是在同一个div下的，而是分两块div
在这里插入图片描述
那我们截图获取dom的时候当然不能获取他们俩共同的父级div，这样截图的图滚动隐藏的那部分就消失不见了
在这里插入图片描述
看到了吧 他就只有一部分，显然这是不符合要求的。所以我们下一步要做的就是 “拆分重组”！！
第一步 获取需要截图的dom节点
在这里插入图片描述

第二步 获取页面上截图区域的dom节点，这里需要注意的是这里不能直接创建dom元素必须要在template上写上dom节点，然后再获取
在这里插入图片描述
在这里插入图片描述
不能直接这样创建，这样会导致截图传入的时候会报错说无法在页面找到该节点
在这里插入图片描述
这样子创建是不行的哈，注意注意！！！

第三步 重组 将获取到的子节点添加到父节点中
在这里插入图片描述
注意不能这样子的哦 ，要使用cloneNode进行节点克隆，不可以直接在太岁头上动土的哦！！
在这里插入图片描述
第四步 清理 判断若是截图区域存在子节点时，要先清理再重新重组，不然就会出现重叠的情况
在这里插入图片描述
在这里插入图片描述
这里使用的是for循环，使用foreach循环会出现节点清理不干净的情况
在这里插入图片描述
在这里插入图片描述
可以看到如果使用foeEach会出现残余的情况，导致截图是这样
在这里插入图片描述
这部分完整代码如下

const downloadImg = () => {
      // 获取所有的.ant-table-fixed节点元素
      const v1 = document.querySelectorAll(".ant-table-fixed");
      // 获取标题
      const vt = document.getElementById("table_title");
      // 获取副标题
      const vs = document.getElementById("table_sub_text");
      // 获取截图区域的dom节点
      let parentDom = document.querySelector(".table_body");
      let childNodes = parentDom.childNodes;
      if (parentDom && childNodes.length > 0) {
        for (let i = childNodes.length - 1; i >= 0; i--) {
          parentDom.removeChild(childNodes[i]);
        }
      }
      parentDom.appendChild(vt.cloneNode(true));
      parentDom.appendChild(vs.cloneNode(true));
      parentDom.appendChild(v1[0].cloneNode(true));
      parentDom.appendChild(v1[1].cloneNode(true));
      // console.log(parentDom);
      downloadImage({ node: parentDom, fileName: data.tableData.title });
    };

这里做一个优化，考虑到性能的问题，我们把清理子节点这步动作放在截图完成之后就把它清理完，优化后的代码是这样的

const downloadImg = () => {
      // 获取所有的.ant-table-fixed节点元素
      const v1 = document.querySelectorAll(".ant-table-fixed");
      // 获取标题
      const vt = document.getElementById("table_title");
      // 获取副标题
      const vs = document.getElementById("table_sub_text");
      // 获取截图区域的dom节点
      let parentDom = document.querySelector(".table_body");
      let childNodes = parentDom.childNodes;
      parentDom.appendChild(vt.cloneNode(true));
      parentDom.appendChild(vs.cloneNode(true));
      parentDom.appendChild(v1[0].cloneNode(true));
      parentDom.appendChild(v1[1].cloneNode(true));
      // console.log(parentDom);
      downloadImage({ node: parentDom, fileName: data.tableData.title }, () => {
        if (parentDom && childNodes.length > 0) {
          for (let i = childNodes.length - 1; i >= 0; i--) {
            parentDom.removeChild(childNodes[i]);
          }
        }
      });
    };

附上样式代码

.table_body {
  position: absolute;
  top: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 22px;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    color: #061a19;
  }
  .sub-text {
    margin: 6px 0 16px;
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #1d2f2e;
  }
}

这里需要指出的是，因为这截图的dom节点不能在页面呈现出来， 就使用障眼法，利用绝对定位使其脱离文档流布局。

场景二
场景二相比如场景一又比较复杂，基本方法与上面场景一叙述的一样，这里不加以赘述，只阐述场景二特有的难点。

如果用场景一的方法，对于场景二产生的效果是这样的
在这里插入图片描述
看到没 这里缺失了 不单单右侧的缺失了 连隐藏的那部分也都缺失了。所以我们又要来看它底层的dom是怎么构成的
研究发现，这右侧是多了这么个玩意，才导致列数缺失
在这里插入图片描述
同样地，我们就找到这个节点，然后把这个节点去掉
在这里插入图片描述
获取根节点后，内部结构是这样的
在这里插入图片描述

下面将对这三部分做处理

let fixRight = parentDom.querySelectorAll(".ant-table-cell-fix-right");
  for (let i = fixRight.length - 1; i >= 0; i--) {
    // 这里是解决右侧固定截图不完整的bug
    fixRight[i].attributes.style.nodeValue = "text-align: center; position: unset; right: 0px;";
    fixRight[i].attributes.style.textContent = "text-align: center; position: unset; right: 0px;";
    fixRight[i].attributes.style.value = "text-align: center; position: unset; right: 0px;";
    fixRight[i].attributes.class.nodeValue = "ant-table-align-center ant-table-row-cell-break-word ant-table-cell-fix-right-first;";
    fixRight[i].attributes.class.textContent = "ant-table-align-center ant-table-row-cell-break-word ant-table-cell-fix-right-first;";
    fixRight[i].attributes.class.value = "ant-table-align-center ant-table-row-cell-break-word ant-table-cell-fix-right-first";
  }

最终实现的效果是这样的
在这里插入图片描述
完美呈现，给自己个赞呀！！！！

最后奉上完整代码

const handleDownloadImage = () => {
  const v1 = document.querySelectorAll(".ant-table-fixed");
  const vt = document.getElementById("table_title");
  const vs = document.getElementById("table_sub_text");
  let parentDom = document.querySelector(".table_body");
  let childNodes = parentDom.childNodes;
  parentDom.appendChild(vt.cloneNode(true));
  parentDom.appendChild(vs.cloneNode(true));
  parentDom.appendChild(v1[0].cloneNode(true));
  parentDom.appendChild(v1[1].cloneNode(true));
  let fixRight = parentDom.querySelectorAll(".ant-table-cell-fix-right");
  for (let i = fixRight.length - 1; i >= 0; i--) {
    // 这里是解决右侧固定截图不完整的bug
    fixRight[i].attributes.style.nodeValue = "text-align: center; position: unset; right: 0px;";
    fixRight[i].attributes.style.textContent = "text-align: center; position: unset; right: 0px;";
    fixRight[i].attributes.style.value = "text-align: center; position: unset; right: 0px;";
    fixRight[i].attributes.class.nodeValue = "ant-table-align-center ant-table-row-cell-break-word ant-table-cell-fix-right-first;";
    fixRight[i].attributes.class.textContent = "ant-table-align-center ant-table-row-cell-break-word ant-table-cell-fix-right-first;";
    fixRight[i].attributes.class.value = "ant-table-align-center ant-table-row-cell-break-word ant-table-cell-fix-right-first";
  }
  downloadImage({ node: parentDom, fileName: title }, () => {
    if (parentDom && childNodes.length > 0) {
      for (let i = childNodes.length - 1; i >= 0; i--) {
        parentDom.removeChild(childNodes[i]);
      }
    }
  });
};

完…，现在周五20:40分，要去寻找光了！！！！

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

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

相关文章

三 动手学深度学习v2 —— Softmax回归+损失函数+图片分类数据集

三 动手学深度学习v2 —— Softmax回归+损失函数+图片分类数据集

三 动手学深度学习v2 —— Softmax回归损失函数图片分类数据集 目录: softmax回归损失函数 1. softmax回归 回归vs分类: 回归估计一个连续值分类预测一个离散类别 从回归到多类分类 回归 单连续数值输出自然区间R跟真实值的误差作为损失 分类 通常多个输出输出i是预测为第…
阅读更多...
硬核！10分钟教你搭建一个本地版GPT4.0！

硬核！10分钟教你搭建一个本地版GPT4.0！

今天10分钟手把手教会你在自己电脑上搭建一个官方原版的GPT4.0。 不用ChatGPT账号，不用API，直接免费使用上官方原版的GPT4.0！ 对！你没看错！不仅是正版GPT4.0，还完全免费！ 而且整个部署流程极其…
阅读更多...
供水管网漏损监测，24小时保障城市供水安全

供水管网漏损监测，24小时保障城市供水安全

供水管网作为城市生命线重要组成部分，其安全运行是城市建设和人民生活的基本保障。随着我国社会经济的快速发展和城市化进程的加快，城市供水管网的建设规模日益增长。然而，由于管网老化、外力破坏和不当维护等因素导致的供水管网漏损&#xf…
阅读更多...
数据结构--单链表

数据结构--单链表

前言 上一章，我们讲了数据结构--动态顺序表，我们会发现有以下问题： 1.当我们要头部或者插入或删除时，都需要进行位置挪动，腾出某一个位置，时间复杂度为0(N)； 2.增容需要申请新空间，…
阅读更多...
个人可搭建在线商城系统，支持docker一键部署

个人可搭建在线商城系统，支持docker一键部署

Hmart 给大家推荐一个简约自适应电子商城系统，针对虚拟商品在线发货，支持企业微信通知，支持docker一键部署，个人资质也可搭建。 前端 后端 H2 console 运行命令 docker run -d --name mall --restartalways -p 8080:8080 -e co…
阅读更多...
全志F1C200S嵌入式驱动开发（从DDR中截取内存）

全志F1C200S嵌入式驱动开发（从DDR中截取内存）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 linux内核起来的时候，不一定所有的内存都是分配给linux使用的。有的时候，我们是希望能够截留一部分内存的。为什么保留这部分内存呢？这里面可以有很多的用途。比如说，第一，如果…
阅读更多...
Spring MVC应用的开发步骤

Spring MVC应用的开发步骤

Spring MVC应用的开发步骤 Spring MVC应用的开发步骤如果以异步方式提交请求利用XML配置文件配置控制器类 Spring MVC应用的开发步骤 下面简单介绍Spring MVC应用的开发步骤。 ① 在web.xml文件中配置核心控制器DispatcherServlet处理所有的HTTP请求。 由于Web应用是基于请求/…
阅读更多...
3个命令定位CPU飙高

3个命令定位CPU飙高

top 指令找出消耗CPU最厉害的那个进程的pid top -H -p 进程pid 找出耗用CPU资源最多的线程pid printf ‘0x%x\n’ 线程pid 将线程pid转换为16进制 结合jstack 找出哪个代码有问题 jstack 进程pid | grep 16进制的线程pid -A 多少行日志 jstack 进程pid | grep 16进制的线程…
阅读更多...
第一章-JavaScript基础进阶part2：事件

第一章-JavaScript基础进阶part2：事件

文章目录 概念一、注册事件（绑定事件）1.1 addEventListener事件监听 二、删除事件（解绑）三、DOM事件流四、事件对象event4.1 e.target与this与e.currentTarget的区别4.2 事件对象的常见属性 五、阻止事件默认行为及冒泡六、事件委…
阅读更多...
Apache Kafka Learning

Apache Kafka Learning

目录 一、Kafka 1、Message Queue是什么？ 2、Kafka 基础架构 3、Kafka安装 4、Offset自动控制 5、Acks & Retries 6、幂等性 7、事务控制 8、数据同步机制 9、Kafka-Eagle 二、Maven项目测试 1、Topic API 2、生产者&消费者 一、Kafka Kafka是…
阅读更多...
express学习笔记5 - 自定义路由异常处理中间件

express学习笔记5 - 自定义路由异常处理中间件

修改router/index.js，添加异常处理中间件 *** 自定义路由异常处理中间件* 注意两点：* 第一，方法的参数不能减少* 第二，方法的必须放在路由最后*/ router.use((err, req, res, next) > {console.log(err);const msg (err &…
阅读更多...
GD32F103VE睡眠与唤醒

GD32F103VE睡眠与唤醒

GD32F103VE睡眠与唤醒，兆易官网给的程序没有测试。等测试后，才发现有问题。 现修改，测试如下： #include "SleepMode.h" #include "delay.h"u8 WFE_CMD_EnterSleepModeFlag;void Enter_DeepSleepMode(void);…
阅读更多...
vue2-diff算法

vue2-diff算法

1、diff算法是什么？ diff算法是一种通过同层的树节点进行比较的高效算法。 其有两个特点： 比较只会在同层级进行，不会跨层级进行。 在diff比较的过程中，循环从两边向中间比较。 diff算法在很多场景中都有应用，在vue中&…
阅读更多...
telnet检验网络能不能通

telnet检验网络能不能通

telnet检测网络能不能通（ip地址端口号）
阅读更多...
牵着她——表白不成功算我输（Python实现）

牵着她——表白不成功算我输（Python实现）

目录 1 牵着她的手一直走下去 2 一首小情诗送给甜甜的她 3 历史总结的哲学想法 4 表白不成功算我输（Python代码） 1 牵着她的手一直走下去 今天牵着她的手，她很贴心。一起并肩赏樱花🌸。骑着快车，清风抚摸着我俩的…
阅读更多...
【Spring】bean的生命周期

【Spring】bean的生命周期

1.具体的生命周期过程 bean对象创建（调用无参构造器） 给bean对象设置属性 bean对象初始化之前操作（由bean的后置处理器负责） bean对象初始化（需在配置bean时指定初始化方法） bean对象初始化之后操作&am…
阅读更多...
STM32F103——基础篇

STM32F103——基础篇

目录 1、寄存器基础知识 2、STM32F103系统架构 2.1 Cortex M3 内核&芯片 2.2 STM32F103系统架构 3、存储器映射 4、寄存器映射 4.1 寄存器描述解读 4.2 寄存器映射举例 4.3 寄存器地址计算 4.4 stm32f103xe.h 寄存器映射 1、寄存器基础知识 概念：寄存…
阅读更多...
pandas read excel 更改string列为时间类型

pandas read excel 更改string列为时间类型

设想我们有如下一个excel文件 我们都知道上面那个时间列其实是string类型，因此在用pandas做时间校验的时候会不通过，我们可以在read_excel的时候，指定这一列做转换 import pandas as pd from datetime import datetime, timedelta import n…
阅读更多...
MySQL — 存储引擎

MySQL — 存储引擎

文章目录 存储引擎存储引擎类型InnoDBMyISAMMEMORY 存储引擎是数据库的核心，对于mysql来说，存储引擎是以插件的形式运行的。虽然mysql支持种类繁多的存储引擎，但是常用的就那么几种。这篇文章主要是对其进行简单的介绍。 存储引擎 MySQL可插…
阅读更多...
项目实战 — 消息队列（3）{数据库操作}

项目实战 — 消息队列（3）{数据库操作}

目录 一、SQLite 🍅 1、添加依赖 🍅 2、修改配置文件后缀（properties -> yaml） 🍅 3、编写配置文件 二、建立数据表 三、添加插入和删除方法 四、整合数据库操作（DataBaseManger类） &a…
阅读更多...
最新文章

Copyright @ 2022~2023