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

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

news 2025/6/25 20:30:08

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