基于表格滚动截屏（表格全部展开，没有滚动条）

news2024/12/23 9:21:06

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