html2canvas是唯一稳定支持CSS渲染的DOM截图库，通过重绘目标元素为canvas导出图片，但不支持iframe、video、跨域资源及CSS 3D变换；截取id="report-section"需调用html2canvas(document.getElementById('report-section'))并处理滚动、字体加载与高分辨率适配。
用 html2canvas 截图指定 DOM 区域最可靠
直接调用浏览器原生 API 无法精确截取某个 <div>，必须借助第三方库。目前稳定、兼容性好、支持 CSS 渲染的只有 html2canvas —— 它把目标元素“重绘”成 canvas，再导出为图片。
注意：它不截图 iframe、video、跨域图片（会触发 canvas 污染），也不支持 CSS 3D 变换或某些 filter 效果。
- 只截取一个
id="report-section"的区域：html2canvas(document.getElementById('report-section')).then(canvas => { /* 导出逻辑 */ }); - 避免截到滚动条或溢出内容：给目标容器加
overflow: hidden，或临时设scrollY = 0 - 字体渲染可能偏移：确保目标元素内字体已加载完成，可加
useCORS: true（需服务端允许跨域）
按钮点击后触发截图并下载 PNG
核心是绑定 click 事件，生成 canvas 后转为 blob 并触发下载。不要用 window.open() 或 location.href，容易被拦截或失真。
- 导出为 PNG（推荐）：
canvas.toBlob(blob => { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'screenshot.png'; link.click(); }, 'image/png'); - 若要保留高分辨率：传入
{ scale: 2 }参数，但内存占用翻倍，移动端慎用 - IE 不支持
toBlob：需 fallback 到toDataURL+location.href，但文件体积大、有长度限制
截图区域包含动态图表（如 ECharts / Chart.js）时的处理
这些库常把图形画在 <canvas> 上，html2canvas 默认能捕获，但前提是图表已完成渲染且 canvas 未被清除。
立即学习“前端免费学习笔记（深入）”；
- 确保截图前图表已就绪：ECharts 用
chart.isFinished()或监听'finished'事件；Chart.js 等检查chart?.rendered === true - 隐藏 tooltip 或动画层：临时设
style.display = 'none'，否则可能截到半透明遮罩或浮动提示 - 若图表使用 WebGL（如 Three.js）：
html2canvas无能为力，需改用renderer.domElement.toDataURL()直接取其 canvas
移动端点击无响应或截图空白的常见原因
不是代码写错，而是 iOS Safari 和部分安卓 WebView 对 canvas 渲染和用户手势有额外限制。
- 必须是用户手势触发（即 click/tap 事件中调用），不能放在异步回调里（如
setTimeout或 Promise resolve 后） - iOS Safari 15+ 需要目标元素有明确宽高（不能靠
flex或grid自撑开），否则 canvas 尺寸为 0 - 截图区域含 position: fixed 元素：会被忽略，建议临时改为
position: absolute并手动计算 top/left
真正麻烦的是跨域资源和字体回退——这两处一旦出问题，整个区域就白屏，但控制台通常不报错，只能靠截图后检查 canvas 内容是否为空来定位。
