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

news2024/9/30 1:41:10

在开发中经常遇到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分，要去寻找光了！！！！

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

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

相关文章

理解树的结构

理解树的结构

树的重要性 二分查找算法、几种核心的排序算法以及图算法都与树有非常密切的关系。有句话锁，“没学会树，算法相当于白学”，可见，树在算法中的地位。 树的考察方面 层次遍历以及拓展问题 前后序遍历与拓展问题 中序遍历与搜索树问…
阅读更多...
数据结构入门指南：带头双向循环链表

数据结构入门指南：带头双向循环链表

目录 文章目录 前言 1.结构与优势 2.链表实现 2.1 定义链表 2.2 创建头节点 2.3 尾插 2.4 输出链表 2.5 尾删 2.6 头插 2.7头删 2.8 节点个数 2.9 查找 2.10 位置插入 2.11 位置删除 2.12 销毁链表 3. 源码 总结 前言 链表一共有8种结构，但最常用的就是无头单…
阅读更多...
Docker网络模型使用详解（2）Docker网络模式

Docker网络模型使用详解（2）Docker网络模式

安装Docker时会自动创建3个网络，可以使用docker network ls命令列出这些网络。 [rootlocalhost ~]# docker network ls NETWORK ID NAME DRIVER SCOPE ebcfad6f4255 bridge bridge local b881c67f8813 compose_lnmp_lnmp…
阅读更多...
Vue2升级Vue3报错：Right-hand side of ‘instanceof‘ is not an object

Vue2升级Vue3报错：Right-hand side of ‘instanceof‘ is not an object

属性prop设置多类型报错： Vue2 写法：支持用竖线隔开。Vue2 Prop expandLevel: {type: Number | String,default: 1, }, Vue3 写法：改为数组，不支持竖线隔开。Vue3 Prop expandLevel: {type: [Number, String],default: 1, }
阅读更多...
二次元美少女【InsCode Stable Diffusion 美图活动一期】

二次元美少女【InsCode Stable Diffusion 美图活动一期】

目录 Stable Diffusion 模型在线使用地址 一、背景介绍 二、模板介绍： 三、操作步骤 1.在线运行地址 2.进入在线运行网址，并点击运行及使用 3.购买GPU并创建项目 4.打开工作台并选择算力资源 5.点击下图中所示框框 6.进入Stable Diffusion WebU…
阅读更多...
VR内容研发公司 | VR流感病毒实验虚拟现实课件

VR内容研发公司 | VR流感病毒实验虚拟现实课件

由广州华锐互动开发的《VR流感病毒实验虚拟现实课件》是一种新型的教学模式，可以为学生提供更加真实和直观的流感病毒分离鉴定实验操作体验，从而提高学生的实验技能和工作效率。 《VR流感病毒实验虚拟现实课件》涉及了生物安全二级实验室(BSL-2)和流感病…
阅读更多...
.jpeg转.jpg，cv2.resize()

.jpeg转.jpg，cv2.resize()

from PIL import Image import os # 定义原文件夹路径和目标文件夹路径 source_folder "path/to/source/folder" target_folder "path/to/target/folder" # 遍历原文件夹中的所有图片文件 for filename in os.listdir(source_folder): if fil…
阅读更多...
【iOS安全】安装Filza || 安装Flexdecrypt

【iOS安全】安装Filza || 安装Flexdecrypt

（成功）使用Cydia安装Filza 直接在Cydia里搜索filza，安装“Filza File Manager” 使用Filza安装flexdecrypt 参考： https://github.com/JohnCoates/flexdecrypt 下载flexdecrypt.deb到手机： https://github.com/JohnC…
阅读更多...
猎聘：2023届高校毕业生就业数据报告（附下载

猎聘：2023届高校毕业生就业数据报告（附下载

关于报告的所有内容，公众【营销人星球】获取下载查看 核心观点 较 2022 届应届生职位同比增长较明显的TOP5 一级行业为能源/化工/环保、医疗健康、汽车、机械/制造、电子/通信/半导体，其中能源/化工/环保同比增长为 42.30%，增速最高.在全世…
阅读更多...
mybatisplus实现自动填充 时间

mybatisplus实现自动填充 时间

mybatisplus实现自动填充功能——自动填充时间 数据库表中的字段 创建时间 (createTime)更新时间 (updateTime) 每次 增删改查的时候，需要通过对Entity的字段（createTime，updateTime）进行set设置，但是，每…
阅读更多...
Systemui的介绍以及与普通应用的差异

Systemui的介绍以及与普通应用的差异

一.SystemUI的介绍 简介 SystemUI是Android操作系统的一个关键组件，主要负责管理和提供用户界面的核心元素，如状态栏、导航栏和锁屏界面等。从下面两点出发了解SystemUI的特性： 一下就是systemui的部分界面，还包括锁屏界面&…
阅读更多...
Android Tencent Shadow 插件接入指南

Android Tencent Shadow 插件接入指南

Android Tencent Shadow 插件接入指南 插件化简述一、clone 仓库二、编译运行官方demo三、发布Shadow到我们本地仓库3.1、安装Nexus 3.x版本3.2、修改发布配置3.3、发布仓库3.4、引用仓库包 四、编写我们自己的代码4.1、新建项目导入maven等共同配置4.1.1、导入buildScript4.1.…
阅读更多...
NsPack3.x脱壳手记

NsPack3.x脱壳手记

发现是NsPack3.x的壳 使用ESP守恒快速脱壳 F9遇到popfd后下面的jmp就是通往OEP了 打开LordPE准备转储映像, 首先调整下ImageSize, 接着dump full 接着不要退出目前的调试, 打开Scylla修复IAT, 把OEP的VA地址输入到OEP处, 接着按照如下图所示步骤 完成后如下, 但NsPack3.x…
阅读更多...
uni-app、H5实现瀑布流效果封装，列可以自定义

uni-app、H5实现瀑布流效果封装，列可以自定义

文章目录 前言一、效果二、使用代码三、核心代码总结前言 最近做项目需要实现uni-app、H5实现瀑布流效果封装，网上搜索有很多的例子，但是代码都是不够完整的，下面来封装一个uni-app、H5都能用的代码。在小程序中，一个个item渲染可能出现问题，也通过加锁来解决问题。 一、…
阅读更多...
小红书卖虚拟学习资料操作方法超详细讲解，不怕你学不会

小红书卖虚拟学习资料操作方法超详细讲解，不怕你学不会

科思创业汇 大家好，这里是科思创业汇，一个轻资产创业孵化平台。赚钱的方式有很多种，我希望在科思创业汇能够给你带来最快乐的那一种！ 谈到赚钱，许多人认为他们赚不到钱，因为他们缺乏赚钱的能力。 然而&a…
阅读更多...
26 MFC序列号函数

26 MFC序列号函数

文章目录 Serialize对于存储文件的序列化 Serialize Serialize 是一个在 MFC (Microsoft Foundation Classes) 中常用的函数或概念。它用于将对象的数据进行序列化和反序列化，便于在不同的场景中保存、传输和恢复对象的状态。 在 MFC 中，Serialize 函数…
阅读更多...
解决vue3+echarts关于无法获取dom宽度和高度的问题

解决vue3+echarts关于无法获取dom宽度和高度的问题

解决vue3echarts关于无法获取dom宽度和高度的问题 近期写vue3项目，很多地方都用到了echarts，刚开始写的时候，发现图一直出不来，报错/报警内容一般有两项： Uncaught (in promise) Error: Initialize failed: invalid …
阅读更多...
安卓证书生成教程

安卓证书生成教程

1.下载安装JDK文件（如已安装请跳过） 根据电脑系统版本下载JDK版本文件 下载地址：[https://www.oracle.com/java/technologies/downloads/](https://www.oracle.com/java/technologies/downloads/) 如果电脑上安装过JDK文件可以跳过2.生成密钥…
阅读更多...
electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

文章目录 引入实现效果实现步骤引入依赖配置electron-buidler文件封装版本升级工具类主进程调用版本更新校验渲染进程封装方法调用 测试版本更新 引入 demo项目地址 electron-updater官网 我们不可能每次发布新的版本都让用户去手动下载安装最新的包，而是应用可以…
阅读更多...
不懂这些专业名词，你很难成为有水平的项目经理——数据分析篇

不懂这些专业名词，你很难成为有水平的项目经理——数据分析篇

大家好，我是老原。 前段时间我们项目组招了个新人小林，让他去和产品经理对下产品上线情况，等到下班也没等来反馈。 第二天在茶水间遇到了产品经理就问了一嘴，才知道已经对接到位了。 一问小林才知道，他完全不知道产…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023