基于html2canvas实现将dom导出为图片，实现截屏效果

这个你们可以用AI封装为通用的，我这个不是通用的，你们需要修改一下图片名字，图片格式之类

async function handlePrintImage() {try {// 获取要截图的DOM元素//.student-detail为一个dom容器，是需要导出为图片的domconst element = document.querySelector('.student-detail')if (!element) {ElMessage.error('获取页面元素失败')return}ElMessage.info('正在生成图片，请稍候...')// 使用html2canvas截图const canvas = await html2canvas(element, {useCORS: true, // 允许加载跨域图片scale: 2, // 提高图片质量backgroundColor: '#ffffff' // 设置白色背景})// 将canvas转为图片const image = canvas.toDataURL('image/png')// 创建下载链接const link = document.createElement('a')link.href = imagelink.download = `学生状态追踪-${props.name}-${new Date().getTime()}.png`// 触发下载document.body.appendChild(link)link.click()document.body.removeChild(link)ElMessage.success('图片已成功导出')} catch (error) {console.error('生成图片失败:', error)ElMessage.error('生成图片失败，请重试')}
}

使用：

   <el-button type="primary" @click="handlePrintImage" :icon="Document" class="print-btn">导出图片</el-button>